Prevent the page from scrolling after having reached the end of a scrollable element.
Super lightweight: ~1007 bytes gzipped.
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>Simply get an element and pass it to scrolltrap.attach. That is it.
const trappableEl = document.getElementsByClassName("element-to-trap")[0];
scrolltrap.attach(trappableEl);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): stringOptionally 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.debugtotrue. - 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.
- Gioele Antoci - Initial work - gioele-antoci
- Ian Schmitz - Initial work - ianSchmitz
This project is licensed under the MIT License - see the LICENSE.md file for details