4
关注
2074
浏览

Chrome的滚动条消失的三个部分(不溢出-Y)

查看全部 3 个回答

徐江 未验证用户 用户来自于: 广东省
2020-09-16 00:47

1)为什么在相同的操作系统和浏览器版本,但不同的机器上,滚动条不同?

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

macOS scroll bar OS settings

如果你有Always选择,我敢肯定,滚动条推页面内容的方式进行。如果您连接了鼠标,也一样。否则,它有你提到的“绝对定位”的行为。请记住,Windows用户可能会看到类似于Always的行为。

2)有没有什么办法解决这个问题,没有任何插件?考虑到Windows用户有情况2和MacOS用户情况1或2?

那么,有点意见第一:我不认为这是一个好主意,隐藏滚动条没有提供给用户沟通元素的可滚动性的另一个提示。总之,我想不出任何不是某种黑客行为,但这里有:

由于这是只需要执行一次,并假设我们希望跨浏览器的可预测功能和操作系统,你可以在这里使用一些JS。在保留边栏的系统上,侧边栏元素的offsetWidthscrollWidth属性将有所不同。默认情况下,您的元素可能有后续的风格:

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

您可以添加/删除基于对offsetWidthscrollWidth的值.r-sidebar--r-padded类。

这个应该无处不在,无论浏览器/操作系统。我已经在macOS/Chrome上使用两个边栏设置进行了测试。

关于作者

问题动态

发布时间
2020-09-15 15:51
更新时间
2022-09-15 16:03
关注人数
4 人关注
个人工作笔记 Powered BY WeCenter V4.1.0 © 2024 粤ICP备2020123311号