最新版 chrome 滚动条样式

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Vue.js

这是一个创建于 669 天前的主题，其中的信息可能已经有所发展或是发生改变。

最新版 chrome 滚动条样式是不是发生变化了，自己定义的样式都失效了

样式

Chrome

滚动

新版

9 条回复 2024-01-30 10:26:24 +08:00

Joseph0717

2024-01-29 10:19:55 +08:00

版本 121.0.6167.86

locatez

2024-01-29 10:33:33 +08:00

是的，现在已经支持 scrollbar-width 和 scrollbar-color ，以前这两个只有火狐支持

来源
https://www.nxrte.com/zixun/42013.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-color
https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-width

0x723b

2024-01-29 10:34:44 +08:00

并没有，这个正常使用 https://greasyfork.org/zh-CN/scripts/472690

kebamt

2024-01-29 13:48:47 +08:00

```
/* Hide browser scrollbar */
::-webkit-scrollbar {
display:none;
}
```
试试这个？

Chuckle

2024-01-29 15:42:26 +08:00

以前的也能正常用，但是 scrollbar 优先级更高，设置了 scrollbar 就会导致原来的::-webkit-scrollbar 失效，scrollbar 太丑陋了，还是只在火狐上用吧（
@-moz-document url-prefix() {
这里面写的样式就只有火狐这类浏览器生效
}

No3ks

2024-01-29 16:51:22 +08:00

楼主是不是变成很细的一条了

fgt1t5y

2024-01-29 21:11:12 +08:00

@No3ks #6 是的，滚动条模式变的很细一根，不是系统原生的滚动条了

Joseph0717

2024-01-30 08:50:06 +08:00

@No3ks @kebamt 这样可以全局生效
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* Track */
::-webkit-scrollbar-track {
border-radius: 8px;
background: @layout-body-background;
}
/* Handle */
::-webkit-scrollbar-thumb {
border-radius: 8px;
background: @primary-color;
}

No3ks

2024-01-30 10:26:24 +08:00

@fgt1t5y 我找到问题了，我的样式中设置 scrollbar-width:thin ,这个样式之前是火狐才生效，现在 chrome 也生效了，我用了 5 楼的办法，加了火狐才能识别的查询，就 ok 了。