Question

在IE10中，滚动条并不总是存在......当它出现时它会作为叠加层出现...这是一个很酷的功能但是我想把它关闭到我的特定网站，因为它是一个全屏应用程序和我的徽标和菜单都丢失了。

IE10：

enter image description here

反转片：

enter image description here

任何人都知道在IE10上总是将滚动条固定到位的方法吗？

overflow-y：滚动似乎不起作用！它只是将它永久地放在我的网站上。

它可能是导致问题的引导，但我不知道哪个部分！请参阅此处的示例：http://twitter.github.io/bootstrap/

Answer 1

正如xec在他的回答中提到的，这种行为是由@ -ms-viewport设置引起的。

好消息是您无需删除此设置即可恢复滚动条（在我们的示例中，我们依赖于@ -ms-viewport设置进行响应式网页设计）。

您可以使用-ms-overflow-style来定义溢出行为，如本文所述：

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

将样式设置为滚动条以获取滚动条：

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

滚动条

表示元素显示经典滚动条类型   当内容溢出时控制。与-ms-autohiding-scrollbar不同，   设置为-ms-overflow-style属性的元素上的滚动条   滚动条总是出现在屏幕上，并且在播放时不会淡出   元素无效。滚动条不会覆盖内容，因此   沿着元素边缘占据额外的布局空间   出现。

Answer 2

谷歌搜索了一下后，我偶然发现了这个; http://channel9.msdn.com/Forums/Coffeehouse/IE10-how-does-the-scrollbar-autohide-on-buildwindowscom-microsoftcom“蓝色墨水”留下的评论声明：

检查页面，我设法使用：
重现它
@ - ms-viewport {width：device-width; }

导致滚动条变得透明。从那时起，这是有道理的   内容现在占据整个屏幕。

在这种情况下，添加：

overflow-y：auto;

使滚动条自动隐藏

在bootstraps responsive-utilities.less file, line 21中，您可以找到以下CSS代码

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

此片段是导致此行为的原因。我建议阅读上面注释代码中列出的链接。（在我最初发布此答案后添加了它们。）

Answer 3

解决方案：两个步骤 - 检测IE10，然后使用CSS：

在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

添加此CSS：

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

为什么会这样：

overflow-y:scroll会永久打开<body>标记垂直滚动条。
-ms-overflow-style:scrollbar会关闭自动隐藏行为，从而推送内容并向我们提供我们已经习惯的滚动条布局行为。

针对询问IE11的用户进行了更新。 - 参考https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

Answer 4

试试这个

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

Answer 5

Bootstrap 4上的数据表也发生了此问题。Mi解决方案是：

检查ie浏览器是否打开。
将表响应类替换为表响应类。

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

Answer 6

尝试了 @ - ms-viewport 和其他建议但在我的情况下没有在Windows 7上使用IE11。我没有滚动条，这里的其他帖子最多会给我一个滚动条即使有足够的内容，也没有在任何地方滚动。发现这篇文章http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/缩小为。。

body { overflow-x: visible; }

。。。并为我做了伎俩。

IE10中的滚动条覆盖，你如何阻止它？

6 个答案: