@calltheguys/ctg-rafscroll
v0.0.6
Published
A requestAnimationFrame scroll handling library for efficient scroll based callback operations.
Downloads
28
Maintainers
Readme
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;
}