How can I prevent the scrollbar overlaying content in IE10?

html css scrollbar internet-explorer-11 internet-explorer-10

79,934

Solution 1

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

Solution 2

As xec mentioned in his answer, this behavior is caused by the @-ms-viewport setting.

The good news is that you do not have to remove this setting to get the scrollbars back (in our case we rely on the @-ms-viewport setting for responsive web design).

You can use the -ms-overflow-style to define the overflow behavoir, as mentioned in this article:

http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx

Set the style to scrollbar to get the scrollbars back:

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

scrollbar

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. Scrollbars do not overlay content, and therefore take up extra layout space along the edges of the element where they appear.

Solution 3

SOLUTION: Two steps - detect if IE10, then use CSS:

do this on init:

if (/msie\s10\.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE11');
}

// --OR--

$('body').addClass(
  /msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? 'IE11' :
  ''  // Neither
);

// --OR (vanilla JS [best])--

document.body.className +=
  /msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? ' IE11' :
  '';  // Neither

Add this CSS:

body.IE10, body.IE11 {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}

Why it works:

The overflow-y:scroll permanently turns on the <body> tag vertical scrollbar.
The -ms-overflow-style:scrollbar turns off the auto-hiding behavior, thus pushing the content over and giving us the scrollbar layout behavior we're all used to.

Updated for users asking about IE11. - Reference https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

Solution 4

Try this

body{-ms-overflow-style: scrollbar !important;}

View more solutions

79,934

Jimmyt1988

Updated on July 08, 2022

Comments

Jimmyt1988 almost 2 years

In IE10, the scrollbar is not always there... and when it appears it comes on as an overlay... It's a cool feature but I would like to turn it off for my specific website as it is a full screen application and my logos and menus are lost behind it.

IE10:

CHROME:

Anyone know a way of always having the scrollbar fixed in position on IE10?

overflow-y:scroll doesn't seem to work! it just puts it permanently over my website.

It may be bootstrap causing the issue but which part I have no idea! see example here: http://twitter.github.io/bootstrap/
- xec almost 11 years
  
  My IE10 does not have this behavior, are you running it as a "Metro" app?
- Jimmyt1988 almost 11 years
  
  No I am not. I am in windows 8, if that makes any difference. It is the same on my laptop too... You may not notice this scrollbar behaviour because other websites like stackoverflow for example have found a way around it... I hope the new picture helps distinguish the difference between what I do and do not want
- Albzi almost 11 years
  
  Is it something to do with a set width of the page?
- Jimmyt1988 almost 11 years
  
  Setting the width of the page would work.. alas, I was wondering if there is a cross browser way. considering firefox, safari and chrome do not have this behaviour. I could use an IE10 specific doo-raggy I suppose.. just doesn't seem like the most elegant answer.
- xec almost 11 years
  
  @JamesT I am on w8 too, but can't find any page that makes IE10 render the scrollbar as an overlay (not even my go-to test page, www.arngren.net)
- Jimmyt1988 almost 11 years
  
  Ahh hangon then, it might be a bootstrap thing??? hmmmm.... Ill reword the question... lol at your link btw.
- xec almost 11 years
  
  Ooh, indeed, the bootstrap page does have the weird-scrollbar-syndrome
- Aprillion almost 8 years
  
  FTR, the problem and both solutions work the same in IE11.
- Suresh Karia almost 7 years
  
  @Jimmyt1988 FYI this is the correct answer and should be accepted. stackoverflow.com/a/19706857/3540289
Jimmyt1988 almost 11 years

You sir are a gentleman and a scholar! I placed @-ms-viewport{ width: auto !important; } into my css file and away the problem went :D
tmsimont over 10 years

great answer, i'd recommend to others that you read the article referenced in bootstrap's comment: timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design -- removing that code from bootstrap might break IE10 responsiveness in Windows 8 metro
xec over 10 years

@tmsimont Good point. Also, they seem to have changed the comment in the latest Boostrap source file (updated my answer with the new comments), which now mentions the use of a UA sniffing script to apply this to "only the Surface/desktop Windows 8" - check out the issue link github.com/twbs/bootstrap/issues/10497
Arsha about 10 years

It should be browser problem Not developers problem! When IE not scroll or not mouse over on right side of windows, the scrollbar should not appear. We should have nothing to do to stop this stupid behavior from IE. Dear MS & IE you make problems too much since IE6. You should stop.
Scott Romack almost 10 years

why would you not just do body{ -ms-overflow-style: scrollbar; } ?
Joseph Lennox almost 10 years

-1 Your code does not work on IE11 and it wont on IE12 when it's released. There's better ways to do IE-specific styles.
nHaskins almost 10 years

I added this on the html element, i.e. html{-ms-overflow-style: scrollbar;} and it worked for me. Would there be use cases where this was needed elsewhere?
Manjit Singh over 9 years

body{-ms-overflow-style: scrollbar;} working fine for me.. Thanks
Conspicuous Compiler over 9 years

@JosephLennox If you could add an answer to indicate a better way of doing IE-specific styles, I'm sure both gdibble and others who come along to this question would appreciate it.
Joseph Lennox over 9 years

@ConspicuousCompiler The "-ms-" prefix already adequately makes it IE only.
JonathanTech over 9 years

Where exactly do you place overflow-y: auto; ? I'm going to guess, but I think it would be helpful for others looking at this to know. Also, does using the overflow-y: auto; trick break Windows 8 metro?
David over 9 years

I really do like bootstrap but I wish they would separate the media and viewport options in a different file. I was building a responsive website for the first time and I literally had to go and remove a ton of stuff from bootstrap to make my site function the way I wanted it to.
Ry- over 9 years

This is like @stefan.s’s answer, but with unnecessary bloat.
mnsth about 9 years

This should be the answer. The accepted one removes viewport device adaption.
xec about 9 years

The question is not about missing scrollbars, but about the semi-transparent scrollbars overlay introduced as a side-effect when using bootstrap. You could also try body { overflow: auto; }
Manuel Arwed Schmidt about 9 years

-ms-overflow-style: scrollbar; seems to be the cleaner solution (see second answer).
Cstyves about 9 years

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; } } Thanks for the hint it's really helpful !
Monicka almost 9 years

it adds overflow on the x
dude over 8 years

-ms-overflow-style: scrollbar; is the trick, just add it to the body
Suresh Karia almost 7 years

@stefan.s this is the correct answer! Should be accepted
Phil Nicholas over 6 years

Worked for me on v.3.3.7. Simply setting the @-ms-viewport in CSS didn't fix my issue in IE11, but this worked.