scr

scrolltrap

Prevent page from scrolling after having reached the end of a scrollable element

Showing:

Popularity

Downloads/wk

1

Maintenance

No Maintenance Data Available

Package

Dependencies

0

Size (min+gzip)

1.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Scrolltrap

Dependency Status npm version

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

FieldTypeDefaultDescription
detectContentChangesbooleanfalseDetects eventual DOM changes inside trapped element. e.g. the element is contentEditable
classnamestringNONEClass 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

License

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100