Menu
I came across an issue with one of our web sites:
In IE9 the page had a vertical scrollbar, but you couldn't use the mousewheel, arrow keys, pgup/pgdwn to scroll. The only way to scroll was to actually click/hold and move the scrollbar.
I removed the following from the css:
{ overflow-x: hidden; } Then scrolling worked as usual. Has anyone else come across this? It seems odd as overflow-x should hide the horizontal scroll bar? Why would it effect the vertical?
I have tried this on a test page and it acts as expected. So it must be a combination of things.
565
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.
Set overflow-x to hidden to Disable Horizontal Scroll Bar in CSS. We can use the overflow-x property and set it to hidden to disable the horizontal scroll bar in CSS. We can test the disabling of the scroll bar horizontally by limiting a text to only one line.
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.
Try using the following code snippet. This should solve your issue.
body, html { overflow-x: hidden; overflow-y: auto; } overflow-x: hidden;
would hide any thing on the x-axis that goes outside of the element, so there would be no need for the horizontal scrollbar and it get removed.
overflow-y: hidden;
would hide any thing on the y-axis that goes outside of the element, so there would be no need for the vertical scrollbar and it get removed.
overflow: hidden;
would remove both scrollbars
41
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
