How can I prevent the scrollbar overlaying content in IE10?

Question 1

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.)

Question 2

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.

Question 3

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)

Question 4

Try this

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

Question 5

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');
        }

Question 6

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.