Stop ScrollBar Covering the Content – Internet Explorer CSS

While designing one of my wordpress theme (not released yet), I have realized that Internet Explorer is playing something annoying. It’s vertical scrollbar is overlaying the content and I don’t want that.

Stop ScrollBar Covering the Content

Do you think it’s a bug ?

Well, actually not. It’s not a bug, Internet Explorer has a css property called -ms-overflow-style which controls such overlaying behavior. For most of the webdesigns it’s a cool property. Scrollbar is not staying there all the time, it appears only when mouse enters the viewing area, otherwise it’s hidden. But when it shows up it has to overlay the content otherwise content has to make space for the scrollbar. That sounds reasonable.

What if you don’t want such effect and want scrollbar keep staying (not overlaying the content at all and not hiding either) always. I mean the normal way just like other browser treats the scrollbar.

Solution:

Add this CSS into your css file:

html {
-ms-overflow-style: scrollbar;
}

Scrollbar will comeback to it’s place (No more hiding). For more information you can always read about the -ms-overflow-style property.