Spec-Faithful • Scrollend Event • Type-Safe • Cross-Browser
🛴 Lightweight (< 1.5KB) scrollend polyfill for browsers, enabling 'scrollend' via add/removeEventListener and 'onscrollend' property for fast, reliable scroll detection. ⛸️
- ✨ Fires
scrollendevent reliably - 🌍 Works across browsers and devices
- ⚡ Lightweight (< 1.5KB minified)
- 🧩 Type-safe for strong typings
- 🛡 Safe native-like behavior
- 🎯 Supports
onceandbubbling - 🔧 Easy drop-in usage
- 📦 Ready for production builds
- 🔍 Debug-friendly and reversible
- 🕹 Compatible with
window,documentandonscrollendproperty
There are two ways of obtaining the polyfill:
- via a CDN (recommended)
- via a local file.
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
then add it to your HTML file:
index.html
<script src="https://cdn.jsdelivr.net/npm/@igorskyflyer/scrollend-polyfill@1.3.0/dist/scrollend.min.js"
integrity="sha256-P1Q7nRQI+8DpWPufXZGwsmwkY/uYGwA0TIFLO7m0kI4"
crossorigin="anonymous"></script>If you use CSP (which you really should) you need to add the above SHA-256 hash to the allowed script sources.
Install it by executing any of the following, depending on your preferred package manager:
pnpm add @igorskyflyer/scrollend-polyfillyarn add @igorskyflyer/scrollend-polyfillnpm i @igorskyflyer/scrollend-polyfillThen import it into your project, e.g. an HTML page via the <script> tag:
index.html
<script src="./node_modules/@igorskyflyer/scrollend-polyfill/dist/scrollend.min.js"></script>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.
<script src="./js/scrollend.min.js"></script>This polyfill adds the scrollend Event for the window and document objects and the onscrollend property.
window.addEventListener('scrollend', myHandler)
document.addEventListener('scrollend', myHandler)
window.onscrollend = myHandler
document.onscrollend = myHandlerscroll-end.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrollend polyfill</title>
<script src="https://cdn.jsdelivr.net/npm/@igorskyflyer/scrollend-polyfill@1.3.0/dist/scrollend.min.js"
integrity="sha256-P1Q7nRQI+8DpWPufXZGwsmwkY/uYGwA0TIFLO7m0kI4"
crossorigin="anonymous"></script>
<style>
body {
height: 180vh;
}
</style>
</head>
<body>
<main>
<div>
<h1>Launch the DevTools and open the Console tab.</h1>
<h3>Then start scrolling.</h3>
</div>
</main>
<script>
function test() {
console.log('Scroll ended')
}
document.addEventListener('scrollend', test)
</script>
</body>
</html>📑 Read about the latest changes in the CHANGELOG.
Licensed under the MIT license.
Consider buying me a coffee. ☕
Thank you for supporting my efforts! 🙏😊
@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.🦘
💬 Emojifies strings, converting textual representations of emojis to graphical ones. 🖌️
🧮 Calculates an estimated file size of Mp3 files. 🎶
🍃 Determines whether a path is a legacy Windows device. 💾
🐸 Checks if a directory is a local Git repository. 🕶️
Created by Igor Dimitrijević (@igorskyflyer).
