prevent-scrolling

Prevent scrolling while optionally allowing scrolling on specified elements.

Usage no npm install needed!

<script type="module">
  import preventScrolling from 'https://cdn.skypack.dev/prevent-scrolling';
</script>

README

prevent-scrolling

Prevent scrolling while optionally allowing scrolling on specified elements.

GitHub release Build Status Codacy Badge

Features

  • Prevents scrolling via keyboard
  • Maintains scrolling position
  • Scrollbar will not disappear
  • Can specify elements to still allow scrolling within
  • Elements without scrolling disabled do not allow scroll events to overflow out to parent elements

Install

You can install via npm or yarn.

npm

npm install --save prevent-scrolling

yarn

yarn add prevent-scrolling

Usage

Importing

You can import using ES6 imports.

import { PreventScrolling, ReEnableScrolling } from 'prevent-scrolling';

Preventing Scrolling

PreventScrolling();

Preventing Scrolling but keep scrolling available on one element

const myScrollableElement = document.querySelector('.MyScrollableElement');

PreventScrolling(myScrollableElement);

Preventing Scrolling but keep scrolling available on multiple elements

const myScrollableElements = [].slice.call(document.querySelectorAll('.MyScrollableElement'));

PreventScrolling(myScrollableElements);

Re-enabling Scrolling

ReEnableScrolling();