Scrolltrap

Prevent the page from scrolling after having reached the end of a scrollable element.
Super lightweight: ~1007 bytes gzipped.

DEMO

Installing

Npm

npm install --save scrolltrap

...bundle it cozily with Browserify or Webpack and import it:

import scrolltrap from 'scrolltrap'

or

const scrolltrap = require("scrolltrap");

Use a CDN

<script src="https://cdn.rawgit.com/gioele-antoci/scrolltrap/2ce75825/dist/scrolltrap.js"></script>

Or grab the file directly from the dist folder

<script src="scrolltrap.min.js"></script>

How to use

Simply get an element and pass it to scrolltrap.attach. That is it.

const trappableEl = document.getElementsByClassName("element-to-trap")[0];
scrolltrap.attach(trappableEl);

API

Attach trap

This will inform scrolltrap to listen for future scrolls on the element passed. It returns a GUID-like token with which you can later destroy the trap.

attach(el: HTMLElement, options?: scrolltrapOptions): string

Optionally a second parameter (options) can be passed.

Options

scrolltrapOptions

| Field | Type | Default | Description | | ----------------- | ---------- | ----------- | ------------------------------------------ | | detectContentChanges | boolean | false | Detects eventual DOM changes inside trapped element. e.g. the element is contentEditable | classname | string | NONE | Class to add to trapped element once the trap engages. The class will be removed on trap disengagement |

Destroy trap

This will inform scrolltrap to stop listening to scroll events. Requires the token that was returned when trap got attached.

destroy(token: string): void

• If you need to troubleshoot eventual issues set scrolltrap.debug to true.
• The current version of scrolltrap depends on mouse events. You have no mouse, you have no traps.
• Nested traps are to use to your own peril.

Authors

• Gioele Antoci - Initial work - gioele-antoci
• Ian Schmitz - Initial work - ianSchmitz

License

This project is licensed under the MIT License - see the LICENSE.md file for details