How can I prevent the scrollbar overlaying content in IE10?

Jimmyt1988 picture Jimmyt1988 · Jun 11, 2013 · Viewed 78.6k times · Source

In IE10, the scrollbar is not always there... and when it appears it comes on as an overlay... It's a cool feature but I would like to turn it off for my specific website as it is a full screen application and my logos and menus are lost behind it.

IE10:

enter image description here

CHROME:

enter image description here

Anyone know a way of always having the scrollbar fixed in position on IE10?

overflow-y:scroll doesn't seem to work! it just puts it permanently over my website.

It may be bootstrap causing the issue but which part I have no idea! see example here: http://twitter.github.io/bootstrap/

Answer

stefan.s picture stefan.s · Oct 31, 2013

As xec mentioned in his answer, this behavior is caused by the @-ms-viewport setting.

The good news is that you do not have to remove this setting to get the scrollbars back (in our case we rely on the @-ms-viewport setting for responsive web design).

You can use the -ms-overflow-style to define the overflow behavoir, as mentioned in this article:

http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx

Set the style to scrollbar to get the scrollbars back:

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

scrollbar

Indicates the element displays a classic scrollbar-type control when its content overflows. Unlike -ms-autohiding-scrollbar, scrollbars on elements with the -ms-overflow-style property set to scrollbar always appear on the screen and do not fade out when the element is inactive. Scrollbars do not overlay content, and therefore take up extra layout space along the edges of the element where they appear.