๐ด Lightweight (< 1.5KB) scrollend polyfill for browsers, enabling 'scrollend' via add/removeEventListener and 'onscrollend' property for fast, reliable scroll detection. โธ๏ธ
## ๐ Table of Contents
- [**Features**](#-features)
- [**Usage**](#-usage)
- [**CDN**](#cdn)
- [**Local**](#local)
- [**API**](#-api)
- [**Examples**](#๏ธ-examples)
- [**Changelog**](#-changelog)
- [**Support**](#-support)
- [**License**](#-license)
- [**Related**](#-related)
- [**Author**](#-author)
## ๐ค Features
- โจ Fires `scrollend` event reliably
- ๐ Works across browsers and devices
- โก Lightweight (< 1.5KB minified)
- ๐งฉ Type-safe for strong typings
- ๐ก Safe native-like behavior
- ๐ฏ Supports `once` and `bubbling`
- ๐ง Easy drop-in usage
- ๐ฆ Ready for production builds
- ๐ Debug-friendly and reversible
- ๐น Compatible with `window`, `document` and `onscrollend` property
## ๐ต๐ผ Usage
There are two ways of obtaining the polyfill:
- via a CDN (*recommended*)
- via a local file.
### CDN
The polyfill is hosted on jsDelivr and you can grab it from here:
[https://cdn.jsdelivr.net/npm/@igorskyflyer/scrollend-polyfill@1.3.0/dist/scrollend.min.js](https://cdn.jsdelivr.net/npm/@igorskyflyer/scrollend-polyfill@1.3.0/dist/scrollend.min.js)
then add it to your HTML file:
`index.html`
```html
```
> ### โน๏ธ NOTE
>
> #### CSP (Content Security Policy)
>
> If you use CSP (*which you really should)* you need to add the above SHA-256 hash to the allowed script sources.
>
---
### Local
Install it by executing any of the following, depending on your preferred package manager:
```bash
pnpm add @igorskyflyer/scrollend-polyfill
```
```bash
yarn add @igorskyflyer/scrollend-polyfill
```
```bash
npm i @igorskyflyer/scrollend-polyfill
```
Then import it into your project, e.g. an HTML page via the `
```
but if you don't like messing with that long path just copy the `"./node_modules/@igorskyflyer/scrollend-polyfill/dist/scrollend.min.js"` file to a directory of your liking and then update the reference to it, i.e.
```html
```
## ๐คน๐ผ API
This polyfill adds the `scrollend` Event for the `window` and `document` objects and the `onscrollend` property.
```js
window.addEventListener('scrollend', myHandler)
document.addEventListener('scrollend', myHandler)
window.onscrollend = myHandler
document.onscrollend = myHandler
```
## ๐๏ธ Examples
`scroll-end.html`
```html
Scrollend polyfill
Launch the DevTools and open the Console tab.
Then start scrolling.
```
## ๐ Changelog
๐ Read about the latest changes in the [**CHANGELOG**](https://github.com/igorskyflyer/npm-scrollend-polyfill/blob/main/CHANGELOG.md).
## ๐ชช License
Licensed under the [**MIT license**](https://github.com/igorskyflyer/npm-scrollend-polyfill/blob/main/LICENSE).
## ๐ Support
I work hard for every project, including this one and your support means a lot to me!
Consider buying me a coffee. โ
Thank you for supporting my efforts! ๐๐
## ๐งฌ Related
[**@igorskyflyer/adblock-filter-counter**](https://www.npmjs.com/package/@igorskyflyer/adblock-filter-counter)
> _๐ฒ A lightweight npm module for counting ad-block filter rules, ultra-simple, fast, and perfect for list maintainers, filter testers, and privacy tool developers.๐ฆ_
[**@igorskyflyer/emojilyzer**](https://www.npmjs.com/package/@igorskyflyer/emojilyzer)
> _๐ฌ Emojifies strings, converting textual representations of emojis to graphical ones. ๐๏ธ_
[**@igorskyflyer/mp3size**](https://www.npmjs.com/package/@igorskyflyer/mp3size)
> _๐งฎ Calculates an estimated file size of Mp3 files. ๐ถ_
[**@igorskyflyer/windev**](https://www.npmjs.com/package/@igorskyflyer/windev)
> _๐ Determines whether a path is a legacy Windows device. ๐พ_
[**@igorskyflyer/is-git-repo**](https://www.npmjs.com/package/@igorskyflyer/is-git-repo)
> _๐ธ Checks if a directory is a local Git repository. ๐ถ๏ธ_
## ๐จ๐ปโ๐ป Author
Created by **Igor Dimitrijeviฤ ([*@igorskyflyer*](https://github.com/igorskyflyer/))**.
