Hide scrollbar in IE

html css internet-explorer-7

Vikas Soni · Aug 30, 2011 · Viewed 79.9k times · Source

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?

Answer

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

Hide scrollbar in IE

Answer

Related questions