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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:04:01  来源:igfitidea点击:

IE10 stop scroll bar from appearing over content and disappearing

cssinternet-explorer-10

提问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.

其他选项包括autononescrollbar,和-ms-autohiding-scrollbar。后者会导致您遇到的行为。

An excerpt from the MSDN documentation, specifically the abovementioned scrollbarvalue:

摘自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-styleproperty set to scrollbaralways 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">