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.
Isolate Scroll supports all browsers that are [ES5-compliant] (http://kangax.github.io/compat-table/es5/) (IE8 and below are not supported).
Isolate Scroll also prevent parent scroll in mobile browsers.
With a package manager (recomanded):
npm install isolate-scroll --save
Manually:
Download this library from https://github.com/AleeeKoi/isolate-scroll/releases
import IsolateScroll from 'isolate-scroll';
var target = '.target-element';
// or:
// var target = document.querySelector('.target-element');
var isolateScrollInstance = new IsolateScroll(target);
<script src="/path/to/isolateScroll.min.js"></script>
<script>
(function(w) {
w.addEventListener('load', function () {
var isolateScrollInstance = IsolateScroll('.container');
}, true);
})(window);
</script>
On inizialization this library caches some values, if DOM changes or is resized you need to manually call following method:
isolateScrollInstance.update();
Copyright (c) 2019-present, Alessandro Pellizzari