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

修改火狐浏览器滚动条

206
0
2022-06-22
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]

Comment

Message Board

编程导航

overscroll-behavior

用变量控制CSS

属性选择器[attribute]

修改火狐浏览器滚动条

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点