最新版 chrome 滚动条样式

› Vue.js

This topic created in 859 days ago, the information mentioned may be changed or developed.

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

样式

Chrome

滚动

新版

9 replies • 2024-01-30 10:26:24 +08:00

Joseph0717

Jan 29, 2024

版本 121.0.6167.86

locatez

Jan 29, 2024

是的，现在已经支持 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

Jan 29, 2024

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

kebamt

Jan 29, 2024

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

Chuckle

Jan 29, 2024

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

No3ks

Jan 29, 2024

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

fgt1t5y

Jan 29, 2024

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

Joseph0717

Jan 30, 2024

@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

Jan 30, 2024

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