JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="one">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum alias facilis molestiae non officiis ad maiores, architecto cumque! Tempore deleniti fuga sequi ea inventore, blanditiis ad provident molestiae odit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum alias facilis molestiae non officiis ad maiores, architecto cumque! Tempore deleniti fuga sequi ea inventore, blanditiis ad provident molestiae odit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum alias facilis molestiae non officiis ad maiores, architecto cumque! Tempore deleniti fuga sequi ea inventore, blanditiis ad provident molestiae odit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum alias facilis molestiae non officiis ad maiores, architecto cumque! Tempore deleniti fuga sequi ea inventore, blanditiis ad provident molestiae odit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum alias facilis molestiae non officiis ad maiores, architecto cumque! Tempore deleniti fuga sequi ea inventore, blanditiis ad provident molestiae odit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum alias facilis molestiae non officiis ad maiores, architecto cumque! Tempore deleniti fuga sequi ea inventore, blanditiis ad provident molestiae odit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum alias facilis molestiae non officiis ad maiores, architecto cumque! Tempore deleniti fuga sequi ea inventore, blanditiis ad provident molestiae odit!
</div>
<div class="two">
test
</div>

CSS

.one {
  width: 200px;
  height: 1000px;
  background: #ccc;
}

.loaded {
  background: red;
}

JavaScript

function scrollToBottomReally({
  loadingPause = 1000, // pause to let page load a bit
  scrollEach = 100, // pixels scrolled at each interval
  scrollInterval = 2000, // MS of wait time between scrolls until we hit bottom
  remoteWindow = cywindow
} = {}) {
  let resolve;
  let deferred = new Promise(r => (resolve = r));
  var isatend = false;
    setTimeout(function() {

  // Add element at end of the page
  remoteWindow.document.body.insertAdjacentHTML('beforeend', '<div style="height:50px; width:50px;" id="the-end">END</div>')
  const end = remoteWindow.document.querySelector('#the-end');

  // Use intersection observer to spot the element we added
function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    // Partially visible elements return true:
    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    if(isVisible){
    return true;
    } else {
    return false;
    }
}

  // Fn to scroll down until we've spotted our element
  function scroller() {

    if (!isScrolledIntoView(end)) {
      remoteWindow.scrollBy({
        top: scrollEach,
        behavior: 'smooth'
      });
    } else {
      stopEverything();
      resolve(true);
    }
  }
  // Initiate scrolling
    var interval = setInterval(scroller, scrollInterval);
 


  // Fn to stop scrolling
  function stopEverything() {
    clearInterval(interval);
    observer.unobserve(end);
  }
   }, loadingPause);

  return deferred;
}


scrollToBottomReally({
  loadingPause: 2000,
  remoteWindow: window,
  scrollEach: 500,
  scrollInterval: 500
})