isolate-scroll

A small no-dependency Javascript lib for prevent browser to scroll parent container on wheel or touch event

Usage no npm install needed!

<script type="module">
  import isolateScroll from 'https://cdn.skypack.dev/isolate-scroll';
</script>

README

AP Logo


Isolate Scroll

Version License

Introduction

Isolate Scroll is a small JavaScript library with no external dependency. Activating this library on an element, parents container will don't move when you scroll inside a child. This library prevent scroll on wheel and thouch event.

Browser Compatibility

Isolate Scroll supports all browsers that are [ES5-compliant] (http://kangax.github.io/compat-table/es5/) (IE8 and below are not supported).

Mobile support

Isolate Scroll also prevent parent scroll in mobile browsers.


Installing

With a package manager (recomanded):

npm install isolate-scroll --save 

Manually:
Download this library from https://github.com/AleeeKoi/isolate-scroll/releases


Basic usage

As ES6 module

import IsolateScroll from 'isolate-scroll';

var target = '.target-element';

// or:
// var target = document.querySelector('.target-element');

var isolateScrollInstance = new IsolateScroll(target);

Including directly as library

<script src="/path/to/isolateScroll.min.js"></script>

<script>
  (function(w) {

    w.addEventListener('load', function () {
      var isolateScrollInstance = IsolateScroll('.container');
    }, true);

  })(window);
</script>

DOM change/resize

On inizialization this library caches some values, if DOM changes or is resized you need to manually call following method:

isolateScrollInstance.update();

License

MIT

Copyright (c) 2019-present, Alessandro Pellizzari