How to disable scrolling of body? $('body').css('overflow','hidden');
only hides the scrollbars but it does not disable the scrolling. I want to disable the scrolling of the body.
But I want to keep the scrolling of other division intact.
The most straightforward way for disabling scrolling on websites is to add overflow: hidden on the <body> tag.
Approach: To prevent body scrolling but allow overlay scrolling we have to switch the overflow to be hidden when the overlay is being shown.
To hide the scrollbar and disable scrolling, we can use the CSS overflow property. This property determines what to do with content that extends beyond the boundaries of its container. To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element.
On top of this for browser compatibility on the parent element you will need to apply text-align: center; which will apply the needed centering of the element. As for preventing scrolling on the div, all you need to apply on the footer is overflow: hidden; and that should do the trick.
Try this CSS, no jQuery needed for this:
<style type="text/css">
html { overflow: hidden; }
</style>
[UPDATE after comment]
Try specifying the height of the body
too:
<style type="text/css">
html, body { overflow: hidden; height: 100% }
body { margin:0; padding:0; }
</style>
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