Is it possible to disable scroll for the page, and only enable for a specific div
inside the page?
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
mouseleave(function() { $('body'). bind('mousewheel DOMMouseScroll', function() { return true; }); }); This is stopping all scrolling where as I want scrolling to still be possible inside the container.
The scrollTo method: The scrollTo() is used to scroll to the specified element in the browser. Syntax: Here, x-cord specifies the x-coordinate and y-cord specifies the y-coordinate. Example: Using scrollTo() to scroll to an 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.
It's ok a css only solution?
If so, just add overflow: hidden to body and overflow: auto to the scrollable div.
body { overflow: hidden; } #scroller { overflow: auto; height: 100px; }
Example
to disable it use:
css
.disableScroll{ overflow-y:hidden; overflow-x:hidden; }
just add <body class="disableScroll">
to the disable
inline style <body style="overflow:hidden">
for div use, leave scrolling enabled <div style="overflow:auto;">
Keep in mind that you can use overflow-y for vertical scroll and overflow-x for horizontal scroll properties
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