awesome-scroll

A simple and fast container to monitor elements as you scroll https://stephenkingsley.github.io/stress.html

BASIC USAGE

first

npm install awesome-scroll --save

and in your code

import awesomeScroll from "awesome-scroll";
 
const scrollElement = document.getElementById("scrollElement");
const watcherElement = awesomeScroll.create(scrollElement);
 
const addClass = () => {
  if (!this.isInViewport) {
    return;
  } else if (this.isFullyInViewport) {
    this.watchItem.style.backgroundColor = '#fcc';
  } else if (this.isAboveViewport) {
    this.watchItem.style.backgroundColor = '#ccf';
  } else if (this.isBelowViewport) {
    this.watchItem.style.backgroundColor = '#ffc';
  }
}
 
watcherElement.stateChange(addClass);

DEMO

• 👉 Stress element

• 👉 fixed element

• 👉 inner scroll

👇 localhost demo

git clone https://github.com/stephenkingsley/awesome-scroll.git
 
cd awesome-scroll
 
npm i
 
npm run dev

open http://localhost:3000

there are some example in /example folder