1.2.1 โ€ข Published 12 months ago

@igor.dvlpr/scrollend-polyfill v1.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

๐Ÿ“ƒ 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/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>

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

โœจ 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).