Menu
I'm having an issue with the overflow-y property in Chrome. Even though I've set it to hidden, I can still scroll the page with the mouse wheel.
Here is my code:
html, body { overflow-y: hidden; } #content { position: absolute; width: 100%; } .step { position: relative; height: 500px; margin-bottom: 500px; }<body> <div id="content"> <div class="step">this is the 1st step</div> <div class="step">this is the 2nd step</div> <div class="step">this is the 3rd step</div> </div> </body>Does anybody know how to block the vertical scrolling in Chrome?
Thanks!
221
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
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.
Setting a height on your body and html of 100% should fix you up. Without a defined height your content is not overflowing, so you will not get the desired behavior.
html, body { overflow-y:hidden; height:100%; } 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
