How can I prevent the scrollbar overlaying content in IE10?

Html Css Scrollbar Internet Explorer-11 Internet Explorer-10

Html Problem Overview

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/

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

After googling a bit I stumbled across a discussion where a comment left by "Blue Ink" states:

> Inspecting the pages, I managed to reproduce it by using: > > @-ms-viewport { width: device-width; } > > which causes the scrollbars to become transparent. Makes sense, since > the content now takes up the whole screen. > > In this scenario, adding: > > overflow-y: auto; > > makes the scrollbars auto-hide

And in bootstraps responsive-utilities.less file, line 21 you can find the following CSS code

// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport {
  width: device-width;
}

This snippet is what's causing the behavior. I recommend reading the links listed in the commented code above. (They were added after I initially posted this answer.)

Solution 3 - Html

SOLUTION: Two steps - detect if IE10, then use CSS:

do this on init:

if (/msie\s10\.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE11');
}

// --OR--

$('body').addClass(
  /msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? 'IE11' :
  ''  // Neither
);

// --OR (vanilla JS [best])--

document.body.className +=
  /msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? ' IE11' :
  '';  // Neither

Add this CSS:

body.IE10, body.IE11 {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}

Why it works:

The overflow-y:scroll permanently turns on the <body> tag vertical scrollbar.
The -ms-overflow-style:scrollbar turns off the auto-hiding behavior, thus pushing the content over and giving us the scrollbar layout behavior we're all used to.

Updated for users asking about IE11.

Reference https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

Solution 4 - Html

Try this

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

Solution 5 - Html

This issue is also happening with Datatables on Bootstrap 4. Mi solution was:

Checked if the ie browser is opening.
Replaced table-responsive class for table-responsive-ie class.

CSS:

.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}

JS:

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
        {
            $('#tableResponsibleID').removeClass('table-responsive');
            $('#tableResponsibleID').addClass('table-responsive-ie');
        }

Solution 6 - Html

Tried the @-ms-viewport and other suggestions but none worked in my case with IE11 on Windows 7. I had no scroll bars and the other posts here would at most give me a scroll bar that didn't scroll anywhere even though there was plenty of content. Found this article http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ which reduced to . . .

body { overflow-x: visible; }

. . . and did the trick for me.

Content Type	Original Author	Original Content on Stackoverflow
Question	Jimmyt1988	View Question on Stackoverflow
Solution 1 - Html	stefan.s	View Answer on Stackoverflow
Solution 2 - Html	xec	View Answer on Stackoverflow
Solution 3 - Html	gdibble	View Answer on Stackoverflow
Solution 4 - Html	user2606817	View Answer on Stackoverflow
Solution 5 - Html	Primoshenko	View Answer on Stackoverflow
Solution 6 - Html	Toadmyster	View Answer on Stackoverflow