纯css 实现漂亮的滚动条样式

@[TOC](纯css 实现漂亮的滚动条样式–变化色)

<div class=\"leaseRoomList test-1\"><ul><li ></li></ul><p class=\"listOver\">到底啦~</p></div><!--css-->.leaseRoomList {height: 490px;overflow-y: auto;margin: 5px 0 0 6px;overflow-x: hidden;}.test-1::-webkit-scrollbar {/*滚动条整体样式*/width: 8px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px;}.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块--纯色*//*border-radius: 10px;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: rgba(23,161,230,1);*//*滚动条里面小方块--变化色*/border-radius: 8px;background-color: skyblue;background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent );}.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 10px;background: #ededed;}