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

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

 1   2       3          自定义滚动条  4           5           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          32      33      34         35  36 
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   
63  64

      查看更多关于如何自定义滚动条？_html/css_WEB-ITnose的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109709

更新时间：2022-11-17 阅读：35次