自定义滚动条
方法一:
<div id="itemsBoxRight">
<div id="itemsBoxRightDiv"></div>
</div>
#itemsBoxRight {
width: 42.69px;
height: 29px;
overflow-y: scroll;
}
/*滚动条整体样式*/
/*滚动条整体样式*/
#itemsBoxRight::-webkit-scrollbar {
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
/*滚动条里面小方块*/
/*滚动条里面小方块*/
#itemsBoxRight::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #11af92;
border-radius: 100px;
}
/*滚动条里面轨道*/
/*滚动条里面轨道*/
#itemsBoxRight::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 100px;
background: rgba(0, 0, 0, 0.2);
}
方法二:
/* Firefox浏览器自定义滚动条样式 */
html {
scrollbar-color: #888 #f1f1f1; /* 设置滚动滑块和滚动轨迹的颜色 */
scrollbar-width: thin; /* 设置滚动条的宽度(可以设置为'auto', 'thin', 或 'none') */
}