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

I've found that it only disappears when adding @-ms-viewport { width: device-width; } To the CSS as per the "fix" for windows 8 that ignores the meta viewport tag (see http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/) — user1010892, Jun 03 '13 at 09:04
Thanks to Pedro below for the answer. Sill unsure why I got downvoted for a totally reasonable question. — user1010892, Jul 08 '13 at 08:29
Check out http://stackoverflow.com/questions/17045132/scrollbar-overlay-in-ie10-how-do-you-stop-that-might-be-bootstrap — user1205577, Jun 17 '14 at 15:37

score 127 · Accepted Answer · edited Nov 05 '14 at 10:57

127

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.

edited Nov 05 '14 at 10:57

Jeroen

53,290
30
172
279

answered Jul 06 '13 at 15:51

Pedro Lopes

1,295
1
8
5

Thanks. This is exactly what I was after!! – user1010892 Jul 08 '13 at 08:29
3

Yet more time spent getting a site to display correctly in IE. +1, worked for me. – Matthew Johnson Nov 26 '13 at 14:29
This works great, but I'm curious as to what happens on a windows phone or tablet? On my computer, I want to get rid of this behavior because the scrollbar appears over the content. Do you know if there's a way to disable it for touch-only devices, like tablets and phones? – Redtopia Oct 10 '14 at 20:14
@Redtopia - Usually, on mobile devices, the scrollbars are unobtrusive and have a default behaviour of auto-hide. If you find other option for -ms-overflow-style that suits you better, just create the same .html rule for touch-devices or different screen sizes with a different value. – Pedro Lopes Jul 03 '15 at 15:30
This is exactly what I was looking for. – Amitava Karan Dec 02 '15 at 07:18
Perfect answer. Saved me a lot of time. – Pawan Pillai Jun 30 '16 at 03:07

score 3 · Answer 2 · answered Apr 14 '15 at 14:48

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

score 1 · Answer 3 · answered May 30 '13 at 08:56

1

the css style

overflow-y:scroll;

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

answered May 30 '13 at 08:56

Patrick Evans

38,456
6
62
84

you might have to use overflow:scroll;, IE might not implement the overflow-y style. Also what are you applying the style to? – Patrick Evans May 30 '13 at 09:00
Then too it does not work. Show me a website where you have implemented it and shall check in IE10. Applying this style to 1. HTML, 2. Body, 3. HTML, body. – Nitesh May 30 '13 at 09:02
4

Thanks for answer but this isn't about forcing a scroll bar when there isn't enough content to cause it. This is about stopping IE10 from hiding the scroll bar until hovering over the window. Thinking about it, I think this happens on a mac but feels better implemented. – user1010892 May 31 '13 at 09:57

score 1 · Answer 4 · answered May 27 '15 at 11:14

1

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

answered May 27 '15 at 11:14

Arvind Sisara

756
1
6
13

score -4 · Answer 5 · answered Jun 25 '13 at 10:06

-4

Adding this META-Tag works:

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

answered Jun 25 '13 at 10:06

ready24it

15
2

Thanks for replying. I think though that unless there's some code to specifically stop this from happening I'll just live with it rather than changing the rendering mode. – user1010892 Jun 26 '13 at 11:15
2

This might solve the problem, but then you're stuck using the IE9 rendering engine, which is probably not a good idea. – Redtopia Oct 10 '14 at 20:19

IE10 stop scroll bar from appearing over content and disappearing

5 Answers5