css3如何修改所有滚动条样式

利用jQuery custom content scroller插件可以修改所有滚动条样式！

打开http://manos.malihu.gr/jquery-custom-content-scroller/引入以下代码！

<link rel="stylesheet" href="/css/jquery.mCustomScrollbar.css" />
<script src="/js/jquery.mCustomScrollbar.concat.min.js"></script>
<div class="mCustomScrollbar content"data-mcs-theme="dark"> 
  <!-- your content -->
</div>
<script>
$(".content").mCustomScrollbar({
  theme:"dark"
  axis:"x" // horizontal scrollbar
  axis:"yx" // vertical and horizontal scrollbar
  callbacks:{
    onScroll:function(){
       myCustomFn(this);
    }
  }
});
function myCustomFn(el){
    console.log(el.mcs.top);
}
</script>

拓展资料：

谷歌浏览器
/* 滚动条样式 */
.scrollbar{
  width:200px;
  height:300px;
  overflow-y:scrool;
}
.scrollbar::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
.scrollbar::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(20, 72, 8,0.3);
  background   : #0097fb;
  }
.scrollbar::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(255, 0, 0, 0.2);
  border-radius: 10px;
  background   : #f5f8fa;
}

//IE浏览器
.scrollbar{  
  scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/   
  scrollbar-face-color: #333; /**//*立体滚动条的颜色*/   
  scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/   
  scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/   
  scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/   
  scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/   
  scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/   
  scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/
}

一款用于在网页上生成五彩纸屑特效的JavaScript库——Canvas Confetti

利用纯css3语法做一个图片瀑布流效果

uniapp微信小程序鼠标点击input placeholder出现位移解决方法

uniapp开发微信小程序提示“启动组件按需注入未通过”解决方法

uniapp开发微信小程序文件不能超过2M（手把手教你实现分包）

标签： css滚动条样式, scroller插件

上面是“css3如何修改所有滚动条样式”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_13339.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！