How to Prevent the Scrollbar Overlaying Content in Ie10

How can I prevent the scrollbar overlaying content in IE10?

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

IE10 stop scroll bar from appearing over content and disappearing

There is a custom vendor-prefixed CSS property to set:

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

Other options include auto, none, scrollbar, and -ms-autohiding-scrollbar. The latter causes the behavior you're experiencing.

An excerpt from the MSDN documentation, specifically the abovementioned scrollbar value:

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.

Durandal & IE: How to prevent body's scrollbar overlaying the page-host area and the navbar

Here is how I have solved this problem. I noticed that if I load the first html page with only the navbar, IE displays scroll bars from edge to edge even though there is there is no data below the navbar (the other browsers do not do this). So I added this css:

body {
     -ms-overflow-style: none;
}
.page-host {
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

This prevents the interfering scroll bar, allowing the desired scroll bar to work. See my comment above for more information.

Vertical scroll bars in IE 10 11

Due to a few conflicting rules you have two overlapping scrollbars (one for html, and the other for the body element) preventing the user from click-dragging on the one that matters most. The quick solution is to simply remove the overflow-y property from your index file, line 25:

Sample Image

This behavior is a bit buggy though, and as a result I will be filing an issue on it internally and having our team take a look.

IE10 prevent selection on elements at onTouch(-ms-touch-action)

Try the following

Special meta tag

<meta name="msapplication-tap-highlight" content="no" />

and also the following style

a:active{background-color:transparent !important;}