@calltheguys/ctg-rafscroll

rAFscroll.js

Basic Load on scroll demo

html

<div class="item">Load more with rAF</div>

js

import {rAFscroll} from '@calltheguys/ctg-rAfScroll';

// creat new item (just a demo helper)
function loadItem(text) {
  const item = document.createElement('p');
  item.classList.add('item');
  item.textContent = `scrollY: ${text}`;
  return item;
}

// scroll handler callback
function loadNewItem(element, scrollY, instance) {
  let newItem = null;
  // destroy example
  if (scrollY > 300) {
    newItem = loadItem('Enough is enough');
    instance.destroy();
  } else {
    // increase height
    newItem = loadItem(scrollY);
  }

  // append new item
  element.parentNode.appendChild(newItem)
}

window.addEventListener('DOMContentLoaded', () => {
  const target = document.documentElement;
  const growWithScroll = new rAFscroll(target, loadNewItem);

  // or passing a scroll container selector
  // const growWithScroll = new rAFscroll('.item', increaseHeight);

  // init the rAf listener
  growWithScroll.init();
})

css

body {
   background: #444444;
   color: white;
   font: 20px/1.51 Helvetica, sans-serif;
   margin:0 auto;
   max-width:900px;
   padding:20px;
   min-height:1000vh;
}
.item {
  position:relative;
  border:4px solid #9BFFBB;
  height:60px;
  width:60%;
  margin: 0 auto;
  background:#333;
  padding:20px;
  top:20px;
}