Chrome滚动条消失(不溢出)

Question

页面(实时版)由(大致)三部分组成:

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

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

问题:( 仅限于CHROME,在版本62和63上测试)

出于某种原因,在不同的机器上,chrome为滚动条提供了两种不同的样式:案例1和案例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上进行了测试.