修改滚动条

目前我们可以通过 CSS伪类来实现滚动条的样式修改，以下为修改滚动条样式用到的CSS伪类：

::-webkit-scrollbar — 整个滚动条
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块
::-webkit-scrollbar-track — 滚动条轨道
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)

此处附上MDN文档传送门：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

原文链接：https://blog.csdn.net/coder_jxd/article/details/124213962

1.null

2.给单独的一个盒子修改滚动条

  <div class="aa">
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
  </div>

css

 .aa {
    height: 200px;
    overflow: auto;
  }

  .aa::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 10px;
    /* 对应横向滚动条的宽度 */
    height: 10px;
  }

  /* 滚动条上的滚动滑块 */
  .aa::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    border-radius: 32px;
  }

  /* 滚动条轨道 */
  .aa::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
  }

效果图