在开发前端页面时,有时需要自定义设置HTML中的滚动条样式。
样式代码如下:
.table-div { /* 设置div横向滚动样式 */
overflow-x: auto;
}
.table-div::-webkit-scrollbar { /* 滚动条整体样式 */
width: 4px; /* 高宽分别对应横竖滚动条的尺寸 */
height: 8px;
}
.table-div::-webkit-scrollbar-thumb { /* 滚动条内滑块的样式 */
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.11);
background: #5d7cd7;
}
.table-div::-webkit-scrollbar-track { /* 滚动条里面轨道的样式 */
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
border-radius: 0;
background: #ffffff;
}
除了上述代码中展示的样式设置外,还有其他的样式设置可以用来调整滚动条样式。
—— END ——