user1010892
user1010892

Reputation: 1189

IE10 stop scroll bar from appearing over content and disappearing

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

Upvotes: 49

Views: 25669

Answers (5)

Arvind Sisara
Arvind Sisara

Reputation: 861

I added this on the html element, i.e. html{-ms-overflow-style: scrollbar;} and it worked for me.

Upvotes: 1

Cstyves
Cstyves

Reputation: 400

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

Upvotes: 3

Pedro Lopes
Pedro Lopes

Reputation: 1305

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.

Upvotes: 127

ready24it
ready24it

Reputation: 15

Adding this META-Tag works:

<meta http-equiv="X-UA-Compatible" content="IE=9">

Upvotes: -4

Patrick Evans
Patrick Evans

Reputation: 42736

the css style

overflow-y:scroll;

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

Upvotes: 1

Related Questions