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