解决Mac Chrome浏览器滚动条自动隐藏的问题

最新推荐文章于 2025-03-18 11:13:08 发布

Crisis_wang

最新推荐文章于 2025-03-18 11:13:08 发布

阅读量3.1k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/Crisis_wang/article/details/120452231

版权

问题：Mac的Chrome浏览器会没有鼠标连接时，会自动在不滚动的时候隐藏滚动条，但是PM需求是需要超出内容就显示滚动条。
解决：直接上代码（颜色自己定义）

@scrollbarwidth: 11px;

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  transition: all 1s;
  background-color: @N900-30;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: @scrollbarwidth;
  height: @scrollbarwidth;
}

::-webkit-scrollbar-thumb:hover {
  background-color: @N900-60 !important;
}

::-webkit-scrollbar:hover {
  width: @scrollbarwidth;
  height: @scrollbarwidth;
}