184

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:

enter image description here

CHROME:

enter image description here

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/

Improve this question
9
  • My IE10 does not have this behavior, are you running it as a "Metro" app?
    – xec
    Commented Jun 11, 2013 at 13:27
  • 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
    – Jimmyt1988
    Commented Jun 11, 2013 at 13:28
  • Is it something to do with a set width of the page?
    – Albzi
    Commented Jun 11, 2013 at 13:32
  • 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.
    – Jimmyt1988
    Commented Jun 11, 2013 at 13:33
  • @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)
    – xec
    Commented Jun 11, 2013 at 13:38

6 Answers 6

Reset to default
180

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.

Improve this answer
6
  • 9
    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?
    – nHaskins
    Commented Aug 14, 2014 at 21:14
  • 7
    body{-ms-overflow-style: scrollbar;} working fine for me.. Thanks
    – Manjit Singh
    Commented Sep 3, 2014 at 9:12
  • 15
    This should be the answer. The accepted one removes viewport device adaption.
    – mnsth
    Commented Feb 24, 2015 at 8:12
  • it adds overflow on the x
    – Monicka
    Commented Aug 4, 2015 at 15:03
  • 1
    @stefan.s this is the correct answer! Should be accepted
    – Suresh Karia
    Commented Jul 3, 2017 at 7:35
163

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

Improve this answer
8
  • 74
    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
    – Jimmyt1988
    Commented Jun 11, 2013 at 14:03
  • 4
    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
    – tmsimont
    Commented Oct 11, 2013 at 15:29
  • @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
    – xec
    Commented Oct 14, 2013 at 8:33
  • 1
    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.
    – BeanFlicker
    Commented Dec 18, 2014 at 22:51
  • 9
    -ms-overflow-style: scrollbar; seems to be the cleaner solution (see second answer).
    – Manuel Arwed Schmidt
    Commented Mar 23, 2015 at 1:04
12

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://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

Improve this answer
6
  • 14
    why would you not just do body{ -ms-overflow-style: scrollbar; } ?
    – Scott Romack
    Commented Jun 12, 2014 at 17:25
  • 7
    -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.
    – Joseph Lennox
    Commented Aug 5, 2014 at 14:24
  • 1
    @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.
    – Conspicuous Compiler
    Commented Sep 9, 2014 at 12:53
  • 2
    @ConspicuousCompiler The "-ms-" prefix already adequately makes it IE only.
    – Joseph Lennox
    Commented Sep 9, 2014 at 14:59
  • 5
    This is like @stefan.s’s answer, but with unnecessary bloat.
    – Ry- ♦
    Commented Dec 29, 2014 at 22:18
4

Try this

body{-ms-overflow-style: scrollbar !important;}
Improve this answer
0

This issue is also happening with Datatables on Bootstrap 4. Mi solution was:

  1. Checked if the ie browser is opening.
  2. Replaced table-responsive class for table-responsive-ie class.

CSS:

.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}

JS:

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
        {
            $('#tableResponsibleID').removeClass('table-responsive');
            $('#tableResponsibleID').addClass('table-responsive-ie');
        }
Improve this answer
-4

Tried the @-ms-viewport and other suggestions but none worked in my case with IE11 on Windows 7. I had no scroll bars and the other posts here would at most give me a scroll bar that didn't scroll anywhere even though there was plenty of content. Found this article http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ which reduced to . . .

body { overflow-x: visible; }

. . . and did the trick for me.

Improve this answer
1
  • 2
    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; }
    – xec
    Commented Mar 4, 2015 at 15:09

Not the answer you're looking for? Browse other questions tagged or ask your own question.