CSS IE10 停止滚动条出现在内容上并消失
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16831751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE10 stop scroll bar from appearing over content and disappearing
提问by user1010892
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.
如果您访问的任何网站的内容会导致 ie10(桌面)中出现垂直滚动条,例如http://www.buildwindows.com/,您会注意到滚动条仅在您将鼠标悬停在窗口上时出现。
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
谢谢
回答by Pedro Lopes
There is a custom vendor-prefixed CSS property to set:
有一个自定义的供应商前缀 CSS 属性要设置:
html {
-ms-overflow-style: scrollbar;
}
Other options include auto
, none
, scrollbar
, and -ms-autohiding-scrollbar
. The latter causes the behavior you're experiencing.
其他选项包括auto
,none
,scrollbar
,和-ms-autohiding-scrollbar
。后者会导致您遇到的行为。
An excerpt from the MSDN documentation, specifically the abovementioned scrollbar
value:
摘自MSDN 文档,特别是上述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 toscrollbar
always appear on the screen and do not fade out when the element is inactive.
指示元素在其内容溢出时显示经典滚动条类型的控件。
与 不同
-ms-autohiding-scrollbar
,-ms-overflow-style
属性设置为scrollbar
始终显示在屏幕上的元素上的滚动条在元素处于非活动状态时不会淡出。
回答by Cstyves
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).
这应该可以解决问题,当屏幕大于 992px 时,媒体查询将防止滚动消失。(我假设 Windows 移动设备需要它来隐藏滚动条。这就是我进行媒体查询的原因)。
@-ms-viewport {
width: device-width;
}
@media (min-width: 992px) {
@-ms-viewport {
width: auto !important;
}
}
回答by Arvind Sisara
I added this on the html element, i.e. html{-ms-overflow-style: scrollbar;} and it worked for me.
我在 html 元素上添加了这个,即 html{-ms-overflow-style: scrollbar;} 并且它对我有用。
回答by Patrick Evans
the css style
css样式
overflow-y:scroll;
overflow-y:scroll;
will cause the element it is set for to always have vertical scrollbar
将导致为其设置的元素始终具有垂直滚动条
回答by ready24it
Adding this META-Tag works:
添加此 META-Tag 有效:
<meta http-equiv="X-UA-Compatible" content="IE=9">