Menu
I want to completely disable scrolling on the page with jquery (NOT body overflow:hidden).
I thought this would work but for some reason it doesn't.
$( window ).on( "scroll", function(e) {
e.preventDefault();
});
749
The scroll bars in the example URL are in the body, so you need to set the overflow property on the body to hidden when the menu is open and to auto when the menu is closed. In the JavaScript file, you can add jQuery(document. body).
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.
Disabling scroll with only CSS. 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.
I tried doing the same thing a month ago and managed to get it working like described here
85
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
