Menu
Simply put, i guess you all know the issue: you use your mousewheel (or trackpad gesture) to scroll inside a div that is set to overflow:scroll (or a setting to that effect). The moment you reach the end of the scrollable area, the scroll 'commands' are immediately sent to the parent container - the main window for instance.
This can be quite annoying and i wonder if there is a way to prevent it.
I created this jsFiddle to demonstrate the issue and provide a ground for experimentation.
The only idea that came to my mind was using preventDefault but since i am not a JS wizard, i don't see where or how i could apply that correctly.
611
To do this (in Chrome, Firefox, and Edge), we can add the CSS property overscroll-behavior: contain to the overflow: auto element. This will prevent the "scroll chaining" behavior, which will, in turn, keep the mouse-wheel active within the target element.
There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
In this method, a new CSS class is created where the height is set to 100% and the scroll bar is disabled by setting the overflow property to hidden. Whenever scrolling has to be disabled, this class is added to the body using the document. body. classList.
This is not optimal but I bootstrap uses this for their modal windows.
FIDDLE
.overflowHidden {
overflow:hidden !important;
}
$('#scrollable').hover(function () {
console.log("hello");
$('body').addClass('overflowHidden');
}, function () {
$('body').removeClass('overflowHidden');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
