CSS中用于控制滚动条的属性有很多种,今天我们就来一一介绍。首先,让我们从最基本的开始——滚动条宽度。我们可以使用以下代码来控制滚动条的宽度: p::-webkit-scrollbar { width
p::-webkit-scrollbar { width: 10px; }
p
表示需要改变滚动条的元素,::-webkit-scrollbar
表示滚动条本身,width
表示滚动条的宽度,可以自定义宽度大小。p::-webkit-scrollbar { width: 10px; background-color: #f1f1f1; } p::-webkit-scrollbar-thumb { background-color: #555; }
background-color
属性分别对应滚动条背景和滚动条滑块颜色。需要注意的是,这两个属性必须分别对应::-webkit-scrollbar
和::-webkit-scrollbar-thumb
选择器。p::-webkit-scrollbar { width: 10px; background-color: #f1f1f1; border: 1px solid #fff; } p::-webkit-scrollbar-thumb { background-color: #555; border-radius: 5px; }
border
属性对应滚动条的边框样式,border-radius
属性对应滑块的圆角半径大小。需要注意的是,这些属性只能在webkit内核的浏览器上使用。p::-webkit-scrollbar { width: 10px; background-color: #f1f1f1; } p::-webkit-scrollbar-thumb { background-color: #555; height: 60px; }
height
属性对应滑块的高度大小。我们可以根据实际需要自定义滑块的大小。粉丝
0
关注
0
收藏
0