修改火狐浏览器滚动条

芋圆社区 > 编程 > CSS > 修改火狐浏览器滚动条

2022-06-22

Hey、小怪兽

• 在火狐浏览器，芋圆社区的滚动条样式都不对了：
• 之前在CSS设置滚动条属性：

/* 滚动条 */
::-webkit-scrollbar {
    width: 10px;
    height: 0;
}

::-webkit-scrollbar-thumb {
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #dddddd;
}

::-webkit-scrollbar-track {
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #f5f5f5;
}

• 由于火狐浏览器没有提供原生滚动条的方法和属性，所以这些都不起作用，可以通过CSS里的scrollbar-width来控制火狐浏览器的滚动条宽度（如果简单地修改滚动条宽度只需要CSS，如果需要定制滚动条可以用JS来写）：

// 需要隐藏的滚动条
scrollbar-width: none;

// 需要显示细的滚动条
scrollbar-width: thin;

// 例
html {
    scrollbar-width: thin;
}

• 加在相应的元素下面后就完成了修改：

上一篇：属性选择器[attribute]

修改火狐浏览器滚动条

Message Board

Comment