A minimalist JavaScript library that prevents scroll in the HTML parent element (including the <body>) when reaching the scroll end of a child element.
Because I was tired of ugly solutions such as:
- setting
overflow: hiddeninto the<body>while scrolling a child element (this makes the page vertical scroll appear and disappear causing a dissapoiting visual efect), or - preventing the browser native scroll by manually increasing
child.scrollTopvalue (so bye bye browser's smooth scrolling)
$ npm install dontscrollthebodyor:
$ bower install dontscrollthebodyIn Node/browserify/CommonJS environments:
var dontscrollthebody = require('dontscrollthebody');The library installed via Bower is a "browserified" bundle so it exports window.dontscrollthebody or the corresponding AMD mechanism.
Prevents the DOM wheel event to be propagated to parent elements when reaching the end of the given elem.
elemmust be an HTML node.
var myContainer = body.querySelector('.myContainer');
dontscrollthebody(myContainer);Removes the previously added wheel listener.
elemmust be an HTML node.
dontscrollthebody.remove(myContainer);Iñaki Baz Castillo (@ibc at Github)
MIT