Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/igorskyflyer/npm-scrollend-polyfill
๐ด A performant and light (< 1.5KB) JavaScript polyfill for the scrollend Event. โธ๏ธ
https://github.com/igorskyflyer/npm-scrollend-polyfill
back-end biome browser dom element es6 event html igorskyflyer javascript js npm scroll-end scrollend scrollend-polyfill ts typescript
Last synced: 3 days ago
JSON representation
๐ด A performant and light (< 1.5KB) JavaScript polyfill for the scrollend Event. โธ๏ธ
- Host: GitHub
- URL: https://github.com/igorskyflyer/npm-scrollend-polyfill
- Owner: igorskyflyer
- License: mit
- Created: 2023-12-11T06:00:18.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-21T21:43:18.000Z (4 months ago)
- Last Synced: 2024-09-23T07:16:01.761Z (about 2 months ago)
- Topics: back-end, biome, browser, dom, element, es6, event, html, igorskyflyer, javascript, js, npm, scroll-end, scrollend, scrollend-polyfill, ts, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@igor.dvlpr/scrollend-polyfill
- Size: 68.4 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
ScrollEnd polyfill
๐ด A performant and light (< 1.5KB) JavaScript polyfill for the scrollend Event. โธ๏ธ
---
๐ Support further development
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! ๐๐
@igorskyflyer
## ๐ Table of contents
- [Usage](#-usage)
- [API](#-api)
- [CDN](#cdn)
- [Install](#package-install)
- [Examples](#-examples)
- [Changelog](#-changelog)
- [License](#-license)
- [Related](#-related)
- [Author](#-author)
---
## ๐ต๐ผ Usage
You can import the file via the CDN or by installing the package.
### CDN
The polyfill is hosted on jsDelivr and you can grab it from here:
[https://cdn.jsdelivr.net/gh/igorskyflyer/[email protected]/dist/scrollend.min.js](https://cdn.jsdelivr.net/gh/igorskyflyer/[email protected]/dist/scrollend.min.js)
then add it to your HTML file:
`index.html`
```html
```
---
### Package install
Install it by executing:
```shell
npm i "@igor.dvlpr/scrollend-polyfill"
```
Then import it into your project, e.g. an HTML page via the `` tag:
<br>
`index.html`
```html
<script src="./node_modules/@igor.dvlpr/scrollend-polyfill/dist/scrollend.min.js"
integrity="sha256-3fG8VnL6PFA7RyDVnkG5bk03GMi6Xvy1tIKkSMKJ+Ds=">
```
but if you don't like messing with that long path just copy the `"./node_modules/@igor.dvlpr/scrollend-polyfill/dist/scrollend.min.js"` file to a directory of your liking and then update the reference to it, i.e.
```html
```
> [!NOTE]
> If you use CSP (*which you really should)* you need to add the above SHA-256 hash to the allowed script sources.
>
## ๐คน๐ผ API
This polyfill adds the `scrollend` Event for the `window` and `document` objects.
```js
window.addEventListener('scrollend', myHandler)
document.addEventListener('scrollend', myHandler)
```
The polyfilled `scrollend` Event can be added via `addEventListener()` or via the property `onscrollend`.
```js
window.onscrollend = myHandler
document.onscrollend = myHandler
```
---
## โจ Examples
`scroll-end.html`
```html
Scrollend polyfill
body {
height: 180vh;
}
Launch the DevTools and open the Console tab.
Then start scrolling.
function test() {
console.log('Scroll ended')
}
document.addEventListener('scrollend', test)
```
---
## ๐ Changelog
โจ Changelog is available here: [CHANGELOG.md](https://github.com/igorskyflyer/npm-scrollend-polyfill/blob/main/CHANGELOG.md).
---
## ๐ชช License
Licensed under the MIT license which is available here, [MIT license](https://github.com/igorskyflyer/npm-scrollend-polyfill/blob/main/LICENSE).
---
## ๐งฌ Related
[@igor.dvlpr/magic-queryselector](https://www.npmjs.com/package/@igor.dvlpr/magic-queryselector)
> _๐ช A TypeScript-types patch for querySelector/querySelectorAll, make them return types you expect them to! ๐ฎ_
[@igor.dvlpr/aria](https://www.npmjs.com/package/@igor.dvlpr/aria)
> _๐งฌ Meet Aria, an efficient Adblock filter list compiler, with many features that make your maintenance of Adblock filter lists a breeze! ๐ฆ_
[@igor.dvlpr/windows-packages](https://www.npmjs.com/package/@igor.dvlpr/windows-packages)
> _๐ป A Node.js module for reading the Packages registry key on Windows 10+. Useful for retrieving Windows 10+ installed Store applications. ๐ฆ_
[@igor.dvlpr/encode-entities](https://www.npmjs.com/package/@igor.dvlpr/encode-entities)
> _๐โโ๏ธ Fast and simple Map and RegExp based HTML entities encoder. ๐_
[@igor.dvlpr/regkeys](https://www.npmjs.com/package/@igor.dvlpr/regkeys)
> _๐ An NPM package for fetching Windows registry keys. ๐_
---
### ๐จ๐ปโ๐ป Author
Created by **Igor Dimitrijeviฤ** ([*@igorskyflyer*](https://github.com/igorskyflyer/)).