HTML设置滚动条样式「建议收藏」

大家好，欢迎来到IT知识分享网。

在开发前端页面时，有时需要自定义设置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 ——