谷歌，火狐等浏览器美化滚动条与ie使用自定义滚动条

最新推荐文章于 2024-08-16 17:39:00 发布

东之建大坏蛋

最新推荐文章于 2024-08-16 17:39:00 发布

阅读量986

点赞数

分类专栏： web前端文章标签： javascript css chrome

本文链接：https://blog.csdn.net/WanweI897/article/details/121123964

版权

web前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

1.谷歌等webkit内核

/*滚动条美化 webkit内核*/
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  /*background-color: #F1F1F1;*/
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
*::-webkit-scrollbar-thumb {
  background-color: #a1c9f1;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

2.火狐

//火狐浏览器下页面滚动条样式
  scrollbar-width:thin;
  scrollbar-color:#a1c9f1 #F1F1F1;

3.ie
ie浏览器下能修改的滚动条样式极少，所以推荐使用插件创建自定义滚动条：
jQuery custom content scroller 这是使用文档地址

简单使用：

//1.引入css文件
<link rel="stylesheet" href="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.css">
//2.引入js文件，配合jquery使用
<script src="../static/plugin/jquery.js"></script>
<script src="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
//3.给元素添加自定义滚动条
$('.box').mCustomScrollbar({axis: 'y',autoHideScrollbar: true})