IE10 stop scroll bar from appearing over content and disappearing

Question

If you go to any website with content that causes a vertical scroll bar in ie10 (desktop) such as http://www.buildwindows.com/ you'll notice that the scroll bar only appears when you hover over the window.

Is there anyway of forcing the scroll bar to always display? I'm worried that it makes it less obvious that there is more content further down the page.

Thanks

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

Answer 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;   } }