Question

我有这个可滚动的div，当我不滚动时（在Chrome中我的Mac上）隐藏了滚动条。但是，在Windows 8上，它无法在Chrome和Firefox中运行。

即使我也不支持，但我已使用以下CSS启用它：

-ms-overflow-style: -ms-autohiding-scrollbar;

有没有办法为Chrome和Firefox启用此行为

这是jsfiddle

Answer 1

也许你可以使用类似的东西？

body {
    margin:0;
    padding:0;
    overflow-y: hidden;

}
body:hover {
    overflow-y: scroll;
}

http://jsfiddle.net/4RSbp/165/

Answer 2

滚动条隐藏在Mac上，因为这是系统首选项（系统偏好设置＆gt;常规＆gt;显示滚动条）。不幸的是，Firefox或Chrome没有-ms-overflow-style的版本。

Answer 3

对于任何来到这里的人来说，如果你想以跨浏览器的跨系统方式隐藏滚动条并保持滚动性而不会在鼠标渲染过程中出现视觉故障;将它们隐藏在容器的极限之后是一种很好的方法。（小心，这将很长）

假设你有一个可滚动的容器，你想要隐藏垂直滚动条（即使是现代系统显示的薄透明滚动条）。它的ID是#scrollable：

<html>
[...]
<div id="scrollable">Some Y large content</div>
[...]
</html>

为了达到我们想要的目的，＃scrollable必须由一个专门为它的节点包含（一个div可以工作，在这个例子中#rolllable-cover），我们必须知道#scrollable布局的宽度和高度。让我们说它将是一个800px x 900px的区域。所以我们得到了：

<html>
[...]
<div id="scrollable-cover">
 <div id="scrollable">Some Y large content</div>
</div>
[...]
</html>

它的CSS：

#scrollable-cover {
 width: 800px;
 height: 900px;
 overflow: hidden
}
#scrollable {
 width: 820px;
 height: 100%;
 overflow: scroll;
}

这样，＃scrollable将被拉伸到其中间父级（＃scrollable-cover）的高度，并且其大内容将其呈现为可滚动框，但是，因为它的宽度比其父级大20px，溢出：隐藏＆＃39;属性，滚动条将不会显示，因为它在#scrollable右侧隐藏的20px上呈现。

这导致我们不方便，＃scrollable的内容也可能在隐藏的20px宽度区域中呈现;为避免这种情况，有两种方法。一个是将#scrollable的所有内容包装在＃scrollable-wrapper中，宽度为800px，自动高度为：

<html>

[...]

<style>
#scrollable-cover {
 width: 800px;
 height: 900px;
 overflow: hidden
}
#scrollable {
 width: 820px;
 height: 100%;
 overflow: scroll;
}
#scrollable-wrapper {
 width: 800px;
 height: auto;
}
</style>

[...]

<div id="scrollable-cover">
 <div id="scrollable">
  <div id="scrollable-wrapper">Some Y large content</div>
 </div>
</div>

[...]

</html>

这样，所有内容都将在我们的可滚动框内以800px宽度布局呈现。但是，如果你不想添加另一个元素，你可以使用 Second CSS only选项来解决这个问题，使用右边的框大小调整20px填充：

#scrollable-cover {
 width: 800px;
 height: 900px;
 overflow: hidden
}
#scrollable {
 width: 820px;
 height: 100%;
 overflow: scroll;
 padding-right: 20px
 box-sizing: border-box;
}

这样，在#scrollable中呈现的任何内容都将避开右侧的20px隐藏区域，以及＆＃39; box-sizing：border-box＆＃39;将告诉浏览器在#scrollable的总宽度为820px时包含20px的填充（否则，它将增长到计算的总计840px）。在此处选中框大小兼容性：http://caniuse.com/#search=box-sizing

当然，这个例子也适用于水平滚动，只是将#scrollable 20px的高度增加到高于它的中间父级的高度。这是线索;）

Answer 4

对于那些不是因为系统偏好设置而来到这里的人，而是因为滚动条通常在Chrome的Windows系统上可见：

不要那样保存您的CSS：

overscroll: scroll;

但是

overscroll: auto;

这样，只有在必要时它才会显示在Windows Chrome浏览器中。

在这里找到：Hide useless scrollbars that show up on Windows only

Chrome（Windows）不会隐藏滚动条

4 个答案: