@igor.dvlpr/scrollend-polyfill

v1.2.1

Published

4 months ago

🛴 A performant and light (< 1.5KB) JavaScript polyfill for the scrollend Event. ⛸️

Downloads

0High
0Medium
0Low

igor.dvlpr

scrollend scroll-end browser scroll event polyfill dom document interactivity igorskyflyer igor.dvlpr

📃 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! 🔮

@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

💻 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

🏃‍♂️ Fast and simple Map and RegExp based HTML entities encoder. 🍁

@igor.dvlpr/regkeys

📚 An NPM package for fetching Windows registry keys. 🗝

👨🏻‍💻 Author

Created by Igor Dimitrijević (@igorskyflyer).

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme