修改滚动条样式

• html代码

<div class="rulebox">
        随机生成的一段文字随机生成的一段文字随机生成的一段文字随机生成的一段文字
        随机生成的一段文字随机生成的一段文字随机生成的一段文字随机生成的一段文字
        随机生成的一段文字随机生成的一段文字随机生成的一段文字随机生成的一段文字
        随机生成的一段文字随机生成的一段文字随机生成的一段文字随机生成的一段文字
        随机生成的一段文字随机生成的一段文字随机生成的一段文字随机生成的一段文字
        随机生成的一段文字随机生成的一段文字随机生成的一段文字随机生成的一段文字
        随机生成的一段文字随机生成的一段文字随机生成的一段文字随机生成的一段文字
        随机生成的一段文字随机生成的一段文字随机生成的一段文字随机生成的一段文字
        随机生成的一段文字随机生成的一段文字随机生成的一段文字随机生成的一段文字
        随机生成的一段文字随机生成的一段文字随机生成的一段文字随机生成的一段文字
        随机生成的一段文字随机生成的一段文字随机生成的一段文字随机生成的一段文字
        随机生成的一段文字
</div>

• css代码

/*需要滚动条区域元素*/
.rulebox {
    width: 500px;
    height: 200px;
    overflow-y: auto;
    margin: 0 auto;
    padding: 10px;
}

/*修改滚动条样式*/
.rulebox::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}

.rulebox::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

.rulebox::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}

• 效果图

  
  设置的滚动条效果图