滚动条样式自定义
<title>滚动条样式自定义</title>
<style> .test{ width: 50px; height: 200px; overflow: auto; float: left; margin: 5px; border: none; background: #f00;
} .scrollbar{ width: 30px; height: 300px; margin: 0 auto; background: #0f0;
} .test-1::-webkit-scrollbar {/\*滚动条整体样式\*/ width: 10px; /\*高宽分别对应横竖滚动条的尺寸\*/ height: 1px;
} .test-1::-webkit-scrollbar-thumb {/\*滚动条里面小方块\*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #535353;
} .test-1::-webkit-scrollbar-track {/\*滚动条里面轨道\*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #EDEDED;
}
</style\>
</div>
</div>
</body>
</html>js效果图测试内容
</div>
</body>
</html>
<!DOCTYPE html>
手机扫一扫
移动阅读更方便
你可能感兴趣的文章