Login
  • 首页
  • 社规
  • 指南
  • 编程
  • 统计
  • 排行
  • 友链
  • 游戏
  • 生活
  • 追番
  • 留言
  • 归档
  • 进程
  • 审核
  • 图床
  • 工具
  • 自动
  • 图标
  • 监控
  • 版本
芋圆社区 > 编程 > CSS > 修改火狐浏览器滚动条

修改火狐浏览器滚动条

46
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]

Message Board

Comment

编程导航

用变量控制CSS

属性选择器[attribute]

修改火狐浏览器滚动条

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

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

签到失败!今日已签到!

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

复制成功