CSS3自定义滚动条

chrome（webkit内核）浏览器支持自定义滚动条，幸运 的是移动端的浏览器大多基于webkit内核。给移动端页面添加漂亮的自定义滚动条。

1.CSS样式

<style>
    .table-responsive {
        height: 200px;
        width: 200px;
        background-color: #eeeeee;
    }
    .table-responsive {
        overflow-x: auto;
        overflow-y: auto;
    }
    .table-responsive::-webkit-scrollbar-track-piece {
        background-color: rgba(0, 0, 0, 0);
        border-left: 1px solid rgba(0, 0, 0, 0);
    }
    .table-responsive::-webkit-scrollbar {
        width: 5px;
        height: 6px; /*滚动条高度*/
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }
    .table-responsive::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.5);
        background-clip: padding-box;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        min-height: 28px;
    }
    .table-responsive::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

2.html代码


<div class="table-responsive">
<p>testtetstesttetstesttetstesttetstesttetstesttetstesttetstesttetstesttetstesttets</p>
<p></p>
<p>testtetstesttetstesttets</p>
<p></p>
<p>testtets</p>
<p></p>
<p>testtets</p>
<p></p>
<p>testtets</p>
<p></p>
</div>

3.测试效果