Question

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

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

右侧边栏应该是可滚动的，因此我设置overflow-y: scroll; right: -17px;只是隐藏滚动条。 Body, html有overflow-y: auto;。这样我就不必拥有两个滚动条（页面和右侧边栏）。

ISSUE： （仅限于CHROME，在版本62和63上测试）

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

所以基本上，对于案例1 ，右侧边栏滚动条是＆＃34;绝对定位＆＃34;由于这个原因，页面隐藏了17px，而对于 case 2 ，滚动条是相对定位的＆＃34;并且页面隐藏了滚动条占用的17px。

问题

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

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

Answer 1

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

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

如果您选择了Always，我很确定滚动条会将页面内容推开。如果您连接了鼠标也一样。否则，它有＆＃34;绝对定位＆＃34;你提到的行为。请记住，Windows用户可能会看到与Always类似的行为。

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

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

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

＆＃13;

$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;
}

＆＃13;

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

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

Answer 2

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

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

这是你在找什么？

subjective_norm_list

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

More info here

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

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

Answer 3

左侧边栏：

将此添加到Scroll div：

direction: rtl;
left: -17px;

这就是里面的div：

.nav{   
 direction: ltr;
}

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

Chrome滚动条消失（不溢出）

3 个答案: