Chrome（Windows）不隐藏滚动条

Posted 2023-03-05

技术标签:

【中文标题】Chrome（Windows）不隐藏滚动条【英文标题】：Chrome (windows) does not hide scrollbar 【发布时间】：2014-09-14 16:19:34 【问题描述】：

我有这个可滚动的 div，它（在我的 Mac 上的 Chrome 中）在我不滚动时会隐藏滚动条。但是，在 Windows 8 上，它在 Chrome 和 Firefox 中不起作用。

我也不支持这个，但我使用以下 CSS 启用它：

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

有没有办法为 Chrome 和 Firefox 启用这种行为

这是jsfiddle

【问题讨论】：

【参考方案1】：

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

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


body:hover 
    overflow-y: scroll;

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

【讨论】：

这感觉很狡猾，但我喜欢它。完全按照我的意愿去做。这会导致可访问性问题吗？这将导致在不存在悬停的移动设备上出现问题。【参考方案2】：

滚动条隐藏在您的 Mac 上，因为这是系统偏好设置（系统偏好设置 > 常规 > 显示滚动条）。不幸的是，没有适用于 Firefox 或 Chrome 的 -ms-overflow-style 版本。

【讨论】：

谢谢。这就是我来这里了解的??【参考方案3】：

对于任何来到这里的人，如果您想以跨浏览器跨系统的方式隐藏滚动条并保持启用可滚动性而不会出现鼠标在渲染上的视觉故障；将它们隐藏在容器的限制后面是一个好方法。（注意，这会很长）

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

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

为了实现我们想要的，#scrollable 必须包含在一个专门用于它的节点中（一个 div 可以工作，在这个例子中是 #scrollable-cover），我们必须知道 #scrollable 布局的宽度和高度。假设这将是一个 800 像素 x 900 像素的区域。所以我们得到了：

<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，它具有'overflow: hidden' 属性，滚动条不会显示，因为它在#scrollable 右侧隐藏的 20px 上呈现。

这给我们带来了不便，#scrollable 的内容也可以在隐藏的 20px 宽度区域中呈现；为了避免这种情况，有两种方法。一个是将#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 像素宽度的布局呈现。但是，如果您不想添加其他元素，您可以使用 Second CSS only 选项来解决这个问题，在右侧使用 box-sizing 和 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 的隐藏区域，并且“box-sizing:border-box”会告诉浏览器将 20px 的内边距包含在 #scrollable 的总 820px 宽度中（否则，它将增长到计算出的总大小为 840 像素）。在此处检查框大小兼容性：http://caniuse.com/#search=box-sizing

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

【讨论】：

【参考方案4】：

对于不是因为系统偏好，而是因为滚动条通常在 Chrome 的 Windows 系统中可见的任何人：

不要这样保存你的css：