Chrome滚动条消失（不溢出）

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）为什么滚动条在相同的操作系统和浏览器版本上有所不同，但是不同的机器？

这可能与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;
}

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

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

Answer 2

将滚动条移出用户视线并不是完全隐藏滚动条的方法。

没有任何插件有没有办法解决这个问题？

这是你想要的？

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

这将隐藏所有Chrome浏览器上的滚动条。由于它特定于webkit，它应该适用于不同的操作系统，假设浏览器版本是最新的。

More info here

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

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

Answer 3

左侧边栏：

将其添加到Scroll div：

direction: rtl;
left: -17px;

这对于里面的div：

.nav{   
 direction: ltr;
}

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