我有一个可滚动的div，在我的Mac上的Chrome浏览器中，当我不滚动时，隐藏了滚动条。然而在Windows 8上，它在Chrome和Firefox中无法正常工作。
IE也不支持此功能，但是我已经使用以下CSS启用了它：
-ms-overflow-style: -ms-autohiding-scrollbar;
有没有办法在Chrome和Firefox中启用这种行为？
这是一个jsfiddle
Chrome（Windows）无法隐藏滚动条。
12
- Jeanluca Scaljeri
4个回答
32
也许你可以使用类似这样的东西？
body {
margin:0;
padding:0;
overflow-y: hidden;
}
body:hover {
overflow-y: scroll;
}
- lehi_net
3
1感觉有点狡猾，但我喜欢。完全做到了我想要的。 - jcaruso
4这会导致可访问性问题吗？ - phk
2这会在移动设备上造成问题，因为没有悬停功能。 - Julia Jacobs
18
滚动条在您的 Mac 上被隐藏，因为这是一个系统偏好设置（System Preferences > General > Show scroll bars）。而不幸的是，在Firefox或Chrome中没有-ms-overflow-style的版本。
- marcelo2605
1
1谢谢。这就是我来这里想要了解的内容。 - steve
4
如果你想以跨浏览器和跨系统的方式隐藏滚动条，并保持滚动功能而不会在鼠标渲染时出现视觉故障，将其隐藏在容器的限制范围内是一个好方法。 （注意，这将需要一些篇幅）
假设你有一个可滚动的容器，你想隐藏垂直滚动条（即使是现代系统显示的细透明滚动条）。它的ID是#scrollable:
为了实现我们想要的效果，#scrollable必须被一个专门的节点（在这个例子中是div，名称为#scrollable-cover）所包含，并且我们必须知道#scrollable的布局宽度和高度。假设它将是一个800px x 900px的区域。因此我们有：
这样所有内容都将在800像素宽的布局中呈现在我们的可滚动框内。但是，如果您不想添加另一个元素，您可以使用CSS的第二个选项来解决此问题，即在右侧使用box-sizing和20像素的填充。
这样，#scrollable 内呈现的任何内容都将避免在右侧隐藏 20px 的区域内，'box-sizing: border-box' 声明将告诉浏览器将这 20px 的填充包括在 #scrollable 的总宽度 820px 中（否则，它会增长到计算出的总宽度 840px）。查看 box-sizing 兼容性：http://caniuse.com/#search=box-sizing 当然，这个例子也可以适用于水平滚动，只需将 #scrollable 的高度增加 20px，超过其直接父元素的高度。这是关键 ;)
假设你有一个可滚动的容器，你想隐藏垂直滚动条（即使是现代系统显示的细透明滚动条）。它的ID是#scrollable:
<html>
[...]
<div id="scrollable">Some Y large content</div>
[...]
</html>
为了实现我们想要的效果，#scrollable必须被一个专门的节点（在这个例子中是div，名称为#scrollable-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)的高度，并且其大量内容将使其呈现为可滚动框，但是，由于其宽度比具有“overflow:hidden”属性的父元素大20像素，因此不会显示滚动条，因为它呈现在#scrollable右侧隐藏的20像素上。
这引导我们面临一个问题，即#scrollable的内容也可能在该隐藏的20像素宽度区域中呈现。为了避免这种情况，有两种方法。 一种是将#scrollable的所有内容包装在具有800px宽度和自动高度的#scrollable-wrapper中：
<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>
这样所有内容都将在800像素宽的布局中呈现在我们的可滚动框内。但是，如果您不想添加另一个元素，您可以使用CSS的第二个选项来解决此问题，即在右侧使用box-sizing和20像素的填充。
#scrollable-cover {
width: 800px;
height: 900px;
overflow: hidden
}
#scrollable {
width: 820px;
height: 100%;
overflow: scroll;
padding-right: 20px
box-sizing: border-box;
}
这样，#scrollable 内呈现的任何内容都将避免在右侧隐藏 20px 的区域内，'box-sizing: border-box' 声明将告诉浏览器将这 20px 的填充包括在 #scrollable 的总宽度 820px 中（否则，它会增长到计算出的总宽度 840px）。查看 box-sizing 兼容性：http://caniuse.com/#search=box-sizing 当然，这个例子也可以适用于水平滚动，只需将 #scrollable 的高度增加 20px，超过其直接父元素的高度。这是关键 ;)
- Josué Martín Hernández
1
对于那些不是因为系统偏好而是在Windows Chrome系统中浏览时发现滚动条一般都可见的人:
不要像这样保存你的css文件:
overflow: scroll;
但是相反
overflow: auto;
这样只有在必要时才会在Windows Chrome浏览器上显示。
在此处找到：隐藏仅在Windows上出现的无用滚动条
- Maxeezy
1
简单而优雅的修复。这里的最佳答案远远超过其他答案。 - undefined
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接