淡定哥头像

技术文档

浏览器滚动条样式,css scrollbar 样式

1. 在webkit浏览器中,可以通过样式来控制

示例代码: 运行代码

<html>
<head>
<style>
/* For the "inset" look only */ 
html { overflow: auto; } 
body { position: absolute;top:20px;left:20px;bottom:20px;right:20px;padding:30px;overflow-y:scroll;overflow-x:hidden;} 
::-webkit-scrollbar { width: 12px; } /* Track */ 
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } 
/* Handle */ 
::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255,0,0,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } 
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); } 
.container { width: 300px; height: 300px; background-color: #DCDCDC; overflow: scroll; } 
.dark .container { overflow: hidden;  } 
</style>
</head>
<body>
<div style="width:500px;height:600px;border:1px solid red;">
</div>
</body>
</html>

2. 在其他浏览中,可通过 jQuery滚动条插件 jQuery custom content scroller 来实现

示例代码: 运行代码    运行经典Demo

<html>
<head>
<meta charset="utf-8">
<link href="http://www.jq22.com/demo/customer/demo_files/jquery.mCustomScrollbar.css" rel="stylesheet">
<style>
.content_8 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
 background: #d0b9a0;
 width:8px;
 webkit-border-radius:3px;
 border-radius:3px; 
}
.content_8 .mCSB_scrollTools .mCSB_draggerRail {
 width:3px;
 height: 100%;
 margin: 0 auto;
 background: rgba(0,0,0,0.4);
 border-left: 1px solid rgba(0,0,0,0.4); 
}
body {background:#000;color:#fff;}
</style>
</head>
<body>
 <div class="content_8 content" style="width:500px;height:400px;border:1px dashed #fff;padding:4px 8px;">
  <p>用CSS美化你的滚动条,关注淡定哥博客,http://ian.wang. CSS3自定义滚动条样式。</p>
  <p>用CSS美化你的滚动条,关注淡定哥博客,http://ian.wang. CSS3自定义滚动条样式。用CSS美化你的滚动条,关注淡定哥博客,http://ian.wang. CSS3自定义滚动条样式。</p>
  <p>用CSS美化你的滚动条,关注淡定哥博客,http://ian.wang. CSS3自定义滚动条样式。</p>
  <p>用CSS美化你的滚动条,关注淡定哥博客,http://ian.wang. CSS3自定义滚动条样式。用CSS美化你的滚动条,关注淡定哥博客,http://ian.wang. CSS3自定义滚动条样式。</p>
  <p>用CSS美化你的滚动条,关注淡定哥博客,http://ian.wang. CSS3自定义滚动条样式。</p>
  <p>用CSS美化你的滚动条,关注淡定哥博客,http://ian.wang. CSS3自定义滚动条样式。用CSS美化你的滚动条,关注淡定哥博客,http://ian.wang. CSS3自定义滚动条样式。</p>
  <p>用CSS美化你的滚动条,关注淡定哥博客,http://ian.wang. CSS3自定义滚动条样式。</p>
  <p>用CSS美化你的滚动条,关注淡定哥博客,http://ian.wang. CSS3自定义滚动条样式。用CSS美化你的滚动条,关注淡定哥博客,http://ian.wang. CSS3自定义滚动条样式。</p>
 </div>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://www.jq22.com/demo/customer/jquery.mCustomScrollbar.concat.min.js"></script>
 <script>
 $(function(){
     $(".content_8").mCustomScrollbar({
     scrollButtons:{
      enable:true
     }
    });

  });
 </script>
</body>
</html>

分享到: 

* 发表评论:
Top