@igor.dvlpr/scrollend-polyfill
v1.2.1
Published
🛴 A performant and light (< 1.5KB) JavaScript polyfill for the scrollend Event. ⛸️
Downloads
33
Maintainers
igor.dvlprReadme
📃 Table of contents
🕵🏼 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
then add it to your HTML file:
index.html
<script src="https://cdn.jsdelivr.net/gh/igorskyflyer/[email protected]/dist/scrollend.min.js"
integrity="sha256-3fG8VnL6PFA7RyDVnkG5bk03GMi6Xvy1tIKkSMKJ+Ds="
crossorigin="anonymous"></script>Package install
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.
🤹🏼 API
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 = myHandler✨ Examples
scroll-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/[email protected]/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
✨ Changelog is available here: CHANGELOG.md.
🪪 License
Licensed under the MIT license which is available here, MIT license.
🧬 Related
@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. 🗝
👨🏻💻 Author
Created by Igor Dimitrijević (@igorskyflyer).