如何自定义滚动条？_html/css_WEB-ITnose-html教程-PHP中文网

如何自定义滚动条？_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:35:00

原创

1068人浏览过

滚动条的自定义化，往往在做移动web的时候，能为我们的项目增添不少风采，而且通过为其添加-webkit-overflow-scrolling : touch; 的css属性，使其有着如同ios系统浏览器中bounce的效果，这里的话，提供一个仿ios风格自定义滚动条的demo，代码如下：

Smart Picture

Smart Picture 智能高效的图片处理工具

查看详情

 1 <html> 2     <head> 3         <title>自定义滚动条</title> 4         <meta charset="utf8"/> 5         <style> 6             #scrollbar{ 7                 width:450px; 8                 height:300px; 9                 margin:100px auto;10                 border: 1px #eee solid;11                 background-color:#eee;12                 display:inline-block;13                 overflow: auto;14                 -webkit-overflow-scrolling : touch;  15             }16             /*凹槽宽度*/17             #scrollbar::-webkit-scrollbar{18                 width:8px;19                 height:8px;20             }21             /*拖动条*/22             #scrollbar::-webkit-scrollbar-thumb{23                 background-color:#ccc;24                 border-radius:6px;25             }26             /*背景槽*/27             #scrollbar::-webkit-scrollbar-track{28                 background-color:#ddd;29                 border-radius:6px;30             }31         </style>32     </head>33     <body>34         <div id="scrollbar">35 <code>36 <pre class="brush:php;toolbar:false;">37 #scrollbar{38 width:200px;39 height:200px;40 margin:100px auto;41 border: 1px #eee solid;42 background-color:#eee;43 display:inline-block;44 }45 /*凹槽宽度*/46 #scrollbar::-webkit-scrollbar{47 width:8px;48 height:8px;49 }50 /*拖动条*/51 #scrollbar::-webkit-scrollbar-thumb{52 background-color:ragb(0,0,0,0.3);53 border-radius:6px;54 }55 /*背景槽*/56 #scrollbar::-webkit-scrollbar-track{57 background-color:#ddd;58 border-radius:6px;59 }60

登录后复制

61 62