jonataswalker / Scroll Watcher
Licence: mit
⚡️ 📜 A lightweight, blazing fast, rAF based, scroll watcher.
Stars: ✭ 51
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Scroll Watcher
React Picky Date Time
A react component for date time picker. Online demo examples
Stars: ✭ 31 (-39.22%)
Mutual labels: scrolling
Snakke.js
🐍 Reading Position Indicator written in VanillaJS
Stars: ✭ 36 (-29.41%)
Mutual labels: scrolling
Android scroll endless
Scroll endless for Android recyclerview
Stars: ✭ 12 (-76.47%)
Mutual labels: scrolling
Scroll bars
Hide or show app bar and bottom navigation bar while scrolling.
Stars: ✭ 28 (-45.1%)
Mutual labels: scrolling
Verticalviewpager
Vertical View Pager Scroll page in upward and downward direction. To know more See README.
Stars: ✭ 33 (-35.29%)
Mutual labels: scrolling
Cardviewlist
An elegant and responsive CardView like Android on iOS with Swift. Available horizontal and vertical scrolling with full animations and customizable.
Stars: ✭ 30 (-41.18%)
Mutual labels: scrolling
Multitube
Watch multiple YouTube videos by providing video links or playlist links or channel links or maybe a mix of them! All without opening a single extra tab.
Stars: ✭ 36 (-29.41%)
Mutual labels: watch
Iobroker.vis Timeandweather
ioBroker Widgets set with time and weather
Stars: ✭ 12 (-76.47%)
Mutual labels: watch
Fullpage.js
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
Stars: ✭ 32,974 (+64554.9%)
Mutual labels: scrolling
Proxy Watcher
A library that recursively watches an object for mutations via Proxies and tells you which paths changed.
Stars: ✭ 35 (-31.37%)
Mutual labels: watch
Fuckmyscroll.js
🔮 Animated scrolling to certain point or anchor
Stars: ✭ 10 (-80.39%)
Mutual labels: scrolling
Viewprt
A tiny, dependency-free, high performance viewport position & intersection observation tool
Stars: ✭ 36 (-29.41%)
Mutual labels: scrolling
React Intersection Observer
React component for the Intersection <Observer /> API
Stars: ✭ 940 (+1743.14%)
Mutual labels: scrolling
Npm Build Boilerplate
A collection of packages that build a website using npm scripts.
Stars: ✭ 963 (+1788.24%)
Mutual labels: watch
Scroll Out
ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects!
Stars: ✭ 1,033 (+1925.49%)
Mutual labels: scrolling
Dragscroll
micro library for drag-n-drop scrolling style
Stars: ✭ 989 (+1839.22%)
Mutual labels: scrolling
Angular Drag Scroll
Lightweight drag to scroll directive for AngularJS
Stars: ✭ 35 (-31.37%)
Mutual labels: scrolling
scroll-watcher
A lightweight, blazing fast, rAF based, scroll watcher.
A more up-to-date approach to this scrolling watchers stuff. Slightly inspired by scrollMonitor.
Demos
→ Scrolling, Moving and Recalculating
How to use it?
jsDelivr
→ CDN Hosted -<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/scroll-watcher.min.js"></script>
→ Self hosted
Download latest release.
NPM
→npm install scroll-watcher
Instantiate and watch for a specific (or a list) DOM element
var scroll = new ScrollWatcher();
scroll
.watch("my-element")
.on("enter", function(evt) {
console.log("I'm partially inside viewport");
})
.on("enter:full", function(evt) {
console.log("I'm entirely within the viewport");
})
.on("exit:partial", function(evt) {
console.log("I'm partially out of viewport");
})
.on("exit", function(evt) {
console.log("I'm out of viewport");
});
Make some decision when page is loaded (or reloaded)
watcher.on("page:load", function(evt) {
// maybe trigger a scroll?
window.setTimeout(() => window.scrollBy(0, 1), 20);
});
Instance Methods
watch(target[, offset])
-
target
-{String|Element}
String or DOM node. -
offset
-{Number|Object|undefined}
(optional) Element offset.
Returns:
- Methods
-
on/once/off
- common events -
update
- updates the location of the element in relation to the document
-
- Properties
-
target
- DOM node being watched
-
windowAtBottom([offset])
-
offset
-{Number|undefined}
(optional) How far to offset.
windowAtTop([offset])
-
offset
-{Number|undefined}
(optional) How far to offset.
on/once/off
Instance Events - You can simply watch for scrolling action:
var watcher = new ScrollWatcher();
watcher.on("scrolling", function(evt) {
console.log(evt);
});
// or just once
watcher.once("scrolling", function(evt) {
console.log(evt);
});
// and turn it off (later)
watcher.off("scrolling");
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].