网站首页 » 记录 » 自定义滚动条样式

自定义滚动条样式

March 1, 2018 记录
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{width:300px;height:300px;overflow-y:auto;background:gray;color:#fff;padding:10px;}
    /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar{
        width: 12px;
        height: 20px;
        background:rgba(150,150,150,0.2)
    }
    /*定义滚动条的轨道,内阴影及圆角*/
    ::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);
        background-color: #f5f5f5;
    }
    /*定义滑块,内阴影及圆角*/
    ::-webkit-scrollbar-thumb{
        /*width: 10px;*/
        height: 12px;
        border-radius: 50px;
        -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);
        background:rgba(10,10,10,.2)
    }

</style>
<body>
<div class="box">
    定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸
    定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸
    定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸
    定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸
    定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸
    定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸
    定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸
    定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸
    定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸
    定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸
    定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸
</div>
</body>
</html>