@igorskyflyer/scrollend-polyfill

v1.3.0

Published

2 months ago

🛴 Lightweight (< 1.5KB) scrollend polyfill for browsers, enabling 'scrollend' via add/removeEventListener and 'onscrollend' property for fast, reliable scroll detection. ⛸️

📃 Table of Contents

🤖 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/[email protected]/dist/scrollend.min.js

then add it to your HTML file:

index.html

<script src="https://cdn.jsdelivr.net/npm/@igorskyflyer/[email protected]/dist/scrollend.min.js"
        integrity="sha256-P1Q7nRQI+8DpWPufXZGwsmwkY/uYGwA0TIFLO7m0kI4"
        crossorigin="anonymous"></script>

ℹ️ 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:

pnpm add @igorskyflyer/scrollend-polyfill

yarn add @igorskyflyer/scrollend-polyfill

npm i @igorskyflyer/scrollend-polyfill

Then 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>

🤹🏼 API

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 = 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/npm/@igorskyflyer/[email protected]/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>

📝 Changelog

📑 Read about the latest changes in the CHANGELOG.

🪪 License

Licensed under the MIT license.

💖 Support

🐲 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

💬 Emojifies strings, converting textual representations of emojis to graphical ones. 🖌️

@igorskyflyer/mp3size

🧮 Calculates an estimated file size of Mp3 files. 🎶

@igorskyflyer/windev

🍃 Determines whether a path is a legacy Windows device. 💾

@igorskyflyer/is-git-repo

🐸 Checks if a directory is a local Git repository. 🕶️

👨🏻‍💻 Author

Created by Igor Dimitrijević (@igorskyflyer).

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme