Chrome滚动条消失（不是溢出-y）答案

【问题标题】：Chrome scrollbar disappears (not overflow-y)Chrome滚动条消失（不是溢出-y）
【发布时间】：2018-06-08 07:12:33
【问题描述】：

(live-version) 页面（大致）由三部分组成：

左侧边栏
居中内容
右侧边栏

右侧边栏应该是可滚动的，所以我将overflow-y: scroll; right: -17px; 设置为简单地隐藏滚动条。 Body, html 有overflow-y: auto;。这样我就不必有两个滚动条（用于页面和右侧边栏）。

问题： （仅在 CHROME 中，在版本 62 和 63 上测试）

由于某些原因，在不同的机器上，chrome 为我提供了两种不同的滚动条样式：Case 1 和 Case 2。

所以基本上，对于 case 1，右侧边栏滚动条是“绝对定位”的，因此页面本身隐藏了 17px，而对于 case 2 滚动条“相对定位”，页面隐藏了滚动条占用的 17px。

问题

1) 为什么在相同的操作系统和浏览器版本，但不同的机器上，滚动条是不同的？

2) 有没有办法在没有任何插件的情况下解决这个问题？考虑到 Windows 用户有 情况 2 和 MacOS 用户 情况 1 或 2 吗？

【问题讨论】：

一些问题：您使用哪个操作系统进行测试？您确定浏览器缓存已完全清空吗？对于我的情况（Windows 和 Chrome 版本 63.0.x）一切正常（所以没有情况 2）。
查看实时版本并通过响应宽度运行，我看到了很多响应问题。我的 macbook air 有 1440px 宽，我只看到加载右侧面板的一部分。我先看看你的 CSS 规则。

标签： javascript jquery html css google-chrome

【解决方案1】：

1) 为什么相同操作系统和浏览器版本，但不同机器上滚动条不同？

这可能与 macOS 上的系统设置有关。

如果您选择了Always，我很确定滚动条会将页面内容推开。如果您连接了鼠标，则相同。否则，它具有您提到的“绝对定位”行为。请记住，Windows 用户可能会看到类似于 Always 的行为。

2) 有没有办法在没有任何插件的情况下解决这个问题？考虑到 Windows 用户有第 2 种情况，而 MacOS 用户有第 1 种情况或第 2 种情况？

好吧，先提一点意见：我认为隐藏滚动条而不向用户提供另一个提示来传达元素的可滚动性并不是一个好主意。无论如何，除此之外，我想不出任何不是某种黑客的东西，但这里是：

由于这是只需要执行一次的东西，并且假设我们想要跨浏览器和操作系统的可预测功能，您可以在这里使用一些 JS。在保留侧边栏的系统上，侧边栏元素的offsetWidth 和scrollWidth 属性会有所不同。默认情况下，您的元素可以具有以下样式：

$child-h-padding: 15px;
$max-scrollbar-width: 35px;

.r-sidebar {
  overflow-y: scroll;
  padding: 12px $child-h-padding;
  ...rest
}

.r-sidebar--r-padded {
  padding-right: $child-h-padding + $max-scrollbar-width;
  right: -$max-scrollbar-width;
}

您可以根据offsetWidth 和scrollWidth 的值添加/删除.r-sidebar--r-padded 类。

这应该在任何地方都可以工作，无论浏览器/操作系统如何。我已经在 macOS/Chrome 上使用两个侧边栏设置进行了测试。

【讨论】：

“请记住，Windows 用户可能会看到类似于 Always 的行为” IE11 和 Edge 是几个值得注意的例外，它们会在几秒钟后自动隐藏滚动条。较新版本的 Microsoft Office 也会这样做，而且非常烦人（无法禁用它）。

【解决方案2】：

将滚动条移出用户视线并不像完全隐藏滚动条那样好。

有没有什么方法可以在没有任何插件的情况下解决这个问题？

这是你要找的吗？

.r-sidebar::-webkit-scrollbar { display: none; }

这将隐藏所有 chrome 浏览器上的滚动条。由于它特定于 webkit，它应该可以在不同的操作系统上工作，前提是浏览器版本是最新的。

More info here

为什么滚动条在相同的操作系统和浏览器版本上不同，但不同的机器上

对此我没有立即答复，但请提供有关机器/操作系统版本/浏览器版本的更多详细信息，我会尽力提供详细信息

【讨论】：

【解决方案3】：

左侧边栏：

将此添加到 Scroll div：

direction: rtl;
left: -17px;

这是里面的div：

.nav{   
 direction: ltr;
}

这将完全隐藏滚动条。但 div 仍然是可滚动的。

【讨论】：