Menu
In our application for UI we are using JSF or Prime faces for that. We would like to hide the scrollbar for our application, but we are struggling to achieve this in Internet Explorer (We are using IE7).
Is there any way to prevent for displaying the scroll bar in Internet explorer? I tried to put overflow: hidden; in CSS,but it's not working.
I have tried nearly every node in the DOM and set width/height to 100%, with margin: 0px, padding: 0px. Seems to work great in Firefox, but it doesn't work in IE7?
774
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.
In the Settings window, click the “Ease of Access” category. On the left side of the Ease of Access screen, click the “Display” option. On the right, turn off the “Automatically Hide Scroll Bars In Windows” toggle to make sure your scrollbars don't disappear anymore.
In case of anyone still needs a solution, this one worked for me:
.container{ -ms-overflow-style: none; overflow: auto; } This change allows scroll on the container and hides the bars on IE.
If on the other hand you want to hide it and show it again once the user scroll again you can use.
.container { -ms-overflow-style: -ms-autohiding-scrollbar; } In case you want to hide it completely (the scrollbar) not only from a specific container you can use:
body::-webkit-scrollbar { display: none; } Tested on IE 10 && 11.
Reference
132
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
