Javascript Chrome滚动条消失（不溢出-y）

本页（大致）由三部分组成：

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

右侧边栏应该是可滚动的，所以我设置了

overflow-y:scroll；右：-17px

只需隐藏滚动条

Body，html

have

overflow-y:auto。这样我就不必有两个滚动条（用于页面和右侧栏）

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

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

因此基本上，对于案例1来说，右边的滚动条是“绝对定位”的，因此页面隐藏了17px，而对于案例2来说，滚动条是“相对定位”的，页面隐藏了滚动条所取的17px

问题

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

2） 有没有办法在没有任何插件的情况下解决这个问题？考虑到Windows用户有情况2和MacOS用户有情况1或情况2？
将滚动条移出用户视线并不是完全隐藏滚动条的好方法

有没有办法在没有任何插件的情况下解决这个问题

这就是你要找的吗

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

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


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

对此，我没有立即的答案，但请提供有关计算机/操作系统版本/浏览器版本的更多详细信息，我将尽力提供详细信息。
左侧边栏：

将其添加到Scroll div：

direction: rtl;
left: -17px;

这是给里面的div的：

.nav{   
 direction: ltr;
}

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

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

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


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

2） 有没有办法在没有任何插件的情况下解决这个问题？考虑到Windows用户是否有案例2，MacOS用户是否有案例1或案例2

首先，我有一点看法：我认为隐藏滚动条而不向传达元素可滚动性的用户提供另一个提示不是一个好主意。不管怎么说，有了这些，我想不出任何东西不是某种黑客行为，但下面是：

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


$child-h-padding:15px；
$max滚动条宽度：35px；
.r侧边栏{
溢出y：滚动；
填充：12px$child-h-padding；
休息
}
.r-侧边栏--r-填充{
右侧填充：$child-h-padding+$max滚动条宽度；
右：-$max滚动条宽度；
}
一些问题：您使用了哪些操作系统进行测试？您确定浏览器缓存已完全清空吗？对于我的情况（Windows和Chrome版本63.0.x），一切正常（因此没有情况2）。查看实时版本和响应宽度，我看到了许多响应问题。我的macbook air有1440px宽，我只看到右侧面板的一部分在加载。我先看看你的css规则，“请记住，Windows用户可能会看到类似于Always的行为”几个值得注意的例外是IE11和Edge，它们会在几秒钟后自动隐藏滚动条。新版本的MicrosoftOffice也会这样做，而且非常恼人（没有办法禁用它）。