IE10 stop scroll bar from appearing over content and disappearing

Solution 1:

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.

Solution 2:

This should do the trick, the media query will prevent the scroll for disappearing when screen is larger than 992px. (I assume Windows mobile device need this for hiding the scroll bar. this is why I've made the media query).

@-ms-viewport {
  width: device-width;  
}
@media (min-width: 992px) {
  @-ms-viewport {
    width: auto !important;
  }
}

Solution 3:

the css style

overflow-y:scroll;

will cause the element it is set for to always have vertical scrollbar