as

awesome-scroll

A simple and fast container to monitor elements as you scroll https://plus.google.com/+PaulIrish/posts/Ee53Gg6VCck

Showing:

Popularity

Downloads/wk

15

GitHub Stars

11

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

2.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

👇 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100