javascript - Chrome 滚动条消失(不是 overflow-y)

Question

页面(live-version) (大致)由三部分组成:

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

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

问题:(仅在 CHROME 中，在版本 62 和 63 上测试)

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

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

问题

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

2) 有什么办法可以不用任何插件来解决这个问题吗？考虑到 Windows 用户有情况 2，而 MacOS 用户有情况 1 或 2？

Answer 1

1) Why scrollbars are different on the same OS and browser version, but different machines ?

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

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

2) Is there any way to fix this without any plugins ? Taking into consideration Windows users have the case 2 and MacOS users either case 1 or 2 ?

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

因为这是只需要执行一次的东西，并且假设我们想要跨浏览器和操作系统的可预测功能，您可以在这里使用一些 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 上使用两个侧边栏设置进行了测试。