https://github.com/ssorallen/jquery-scrollstop
A jQuery plugin that fires events when scrolling stops and starts.
https://github.com/ssorallen/jquery-scrollstop
javascript jquery jquery-plugin
Last synced: about 2 months ago
JSON representation
A jQuery plugin that fires events when scrolling stops and starts.
- Host: GitHub
- URL: https://github.com/ssorallen/jquery-scrollstop
- Owner: ssorallen
- License: unlicense
- Created: 2012-06-26T18:50:54.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2020-06-09T16:08:52.000Z (over 5 years ago)
- Last Synced: 2025-09-16T14:15:00.921Z (3 months ago)
- Topics: javascript, jquery, jquery-plugin
- Language: HTML
- Homepage: https://ssorallen.github.io/jquery-scrollstop/
- Size: 22.5 KB
- Stars: 157
- Watchers: 15
- Forks: 60
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
jquery-scrollstop
=================
This plugin fires two events on `window` when scrolling starts and stops:
`scrollstart` and `scrollstop`.
## Installation
This library is released on NPM as [jquery-scrollstop][0]:
```
npm install jquery-scrollstop
```
## Example
The example shows a small box in the upper left that says "SCROLLING" and
colors the body different colors when scrolling:
[https://ssorallen.github.io/jquery-scrollstop/](https://ssorallen.github.io/jquery-scrollstop/)
## Usage
`scrollstart` fires after the first scroll event and won't fire again until
after a `scrollstop` event is fired.
`scrollstop` fires after no `scroll` events have fired for 250 milliseconds.
```js
$(window)
.on("scrollstart", function() {
// Paint the world yellow when scrolling starts.
$(document.body).css({background: "yellow"});
})
.on("scrollstop", function() {
// Paint it all green when scrolling stops.
$(document.body).css({background: "green"});
})
```
### Configuration
#### latency
`latency` is the minimum time between the last scroll event and when the
`scrollstop` event fires. Set `$.event.special.scrollstop.latency` to the
desired number of milliseconds (default: 250).
```js
// Configure time between final scroll event and
// `scrollstop` event to 650ms (default is 250ms).
$.event.special.scrollstop.latency = 650;
```
##### latency per element
Latency can be configured per-element by passing options when the event listener
is bound. If multiple event listeners are bound to the same element, only the
data from the first event listener will set the configuration.
```js
// Configure latency to 650ms for #scrolling-div
$("#scrolling-div").on("scrollstop", {latency: 650}, function() { ... });
```
### jQuery Version Support
The plugin is tested in jQuery 1.2.3+ and jQuery 2.0.3+.
### Attribution
Originally code taken from James Padolsey's blog:
[http://james.padolsey.com/javascript/special-scroll-events-for-jquery/](http://james.padolsey.com/javascript/special-scroll-events-for-jquery/)
[0]: https://www.npmjs.com/package/jquery-scrollstop