🛴 A performant and light (< 1.5KB) JavaScript polyfill for the scrollend Event. ⛸️
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
You can import the file via the CDN or by installing the package.
The polyfill is hosted on jsDelivr and you can grab it from here:
https://cdn.jsdelivr.net/gh/igorskyflyer/npm-scrollend-polyfill@1.2.1/dist/scrollend.min.js
then add it to your HTML file:
index.html
<script src="https://cdn.jsdelivr.net/gh/igorskyflyer/npm-scrollend-polyfill@1.2.1/dist/scrollend.min.js"
integrity="sha256-3fG8VnL6PFA7RyDVnkG5bk03GMi6Xvy1tIKkSMKJ+Ds="
crossorigin="anonymous"></script>Install it by executing:
npm i "@igor.dvlpr/scrollend-polyfill"Then import it into your project, e.g. an HTML page via the <script> tag:
index.html
<script src="./node_modules/@igor.dvlpr/scrollend-polyfill/dist/scrollend.min.js"
integrity="sha256-3fG8VnL6PFA7RyDVnkG5bk03GMi6Xvy1tIKkSMKJ+Ds="></script>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.
<script src="./js/scrollend.min.js"
integrity="sha256-3fG8VnL6PFA7RyDVnkG5bk03GMi6Xvy1tIKkSMKJ+Ds="></script>[!NOTE] If you use CSP (which you really should) you need to add the above SHA-256 hash to the allowed script sources.
This polyfill adds the scrollend Event for the window and document objects.
window.addEventListener('scrollend', myHandler)
document.addEventListener('scrollend', myHandler)The polyfilled scrollend Event can be added via addEventListener() or via the property onscrollend.
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/gh/igorskyflyer/npm-scrollend-polyfill@1.2.1/dist/scrollend.min.js"
integrity="sha256-3fG8VnL6PFA7RyDVnkG5bk03GMi6Xvy1tIKkSMKJ+Ds="
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>✨ Changelog is available here: CHANGELOG.md.
Licensed under the MIT license which is available here, MIT license.
@igor.dvlpr/magic-queryselector
🪄 A TypeScript-types patch for querySelector/querySelectorAll, make them return types you expect them to! 🔮
🧬 Meet Aria, an efficient Adblock filter list compiler, with many features that make your maintenance of Adblock filter lists a breeze! 🦖
💻 A Node.js module for reading the Packages registry key on Windows 10+. Useful for retrieving Windows 10+ installed Store applications. 📦
🏃♂️ Fast and simple Map and RegExp based HTML entities encoder. 🍁
📚 An NPM package for fetching Windows registry keys. 🗝
Created by Igor Dimitrijević (@igorskyflyer).