css：scrollbar样式修改及悬浮显示和放大scrollbar 相关属性整个滚动条滚动条轨道部分没有滑块的轨

scrollbar 相关属性

 /* 整个滚动条（包含横向和纵向）*/
  ::-webkit-scrollbar {}
  /* 滚动条轨道部分 */
  ::-webkit-scrollbar-track {}
  /* 滚动条没有滑块的轨道部分 */
  ::-webkit-scrollbar-track-piece {}
  /* 滚动条滑块部分 */
  ::-webkit-scrollbar-thumb {}
  /* 滚动条上下左右按钮 */
  ::-webkit-scrollbar-button {}
  /* 横向滚动条和纵向滚动条交汇处小方块 */
  ::-webkit-scrollbar-corner {}

整个滚动条

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .scroll-wrap {
      margin: 50px auto;
      width: 200px;
      height: 200px;
      background: #414141;
      overflow: auto;
    }

    .scroll-container {
      width: 210px;
      height: auto;
      color: aliceblue;
    }

    .scroll-wrap::-webkit-scrollbar {
      width: 16px;
      height: 16px;
      border: 1px solid red;
    }

<body>
  <div class="scroll-wrap">
    <div class="scroll-container">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
      </ul>
    </div>
  </div>
</body>

滚动条轨道部分

    .scroll-wrap::-webkit-scrollbar-track {
      background: orange;
      border: 1px solid blue;
      border-radius: 15px;
    }

没有滑块的轨道部分和滑块部分

    .scroll-wrap::-webkit-scrollbar-track-piece {
      background-color: bisque;
    }

    .scroll-wrap::-webkit-scrollbar-thumb {
      background-color: aquamarine;
    }

按钮部分

    .scroll-wrap::-webkit-scrollbar-button {
      background-color: blueviolet;
    }

交汇处

    .scroll-wrap::-webkit-scrollbar-corner {
      background-color: yellowgreen;
    }

自定义滚动条，鼠标悬浮显示，鼠标悬浮到滚动滑块放大

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    ul,
    li {
      display: block;
      margin: 0 auto;
      list-style: none;
      word-break: break-all;
    }

    .scroll-wrap {
      /* 防止遮挡内容 */
      padding-right: 20px;
      margin: 50px auto;
      width: 500px;
      height: 200px;
      background: #111;
      overflow: hidden;
    }

    /* 悬浮显示滚动条 */
    .scroll-wrap:hover {
      overflow-y: auto;
    }

    .scroll-container {
      width: 210px;
      color: aliceblue;
    }

    .scroll-wrap::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }

    .scroll-wrap::-webkit-scrollbar-track {
      background-image: linear-gradient(90deg, #2e2e2e 1px, #111 1px);
    }

    .scroll-wrap::-webkit-scrollbar-thumb {
      background-color: #2e2e2e;
      border-radius: 12px;
      /* padding-box 表示背景裁剪到内边距框，
      这里也可以用content-box,表示裁剪到内容框，
      默认为border-box，表示裁剪到边框*/
      background-clip: padding-box;
      border-style: solid;
      border-width: 3px;
      border-color: transparent;
    }

    /* 悬浮放大滚动滑块 */
    .scroll-wrap::-webkit-scrollbar-thumb:hover {
      background: #434343;
      /*这里默认裁剪到border-box，以下使用shadow代替了边框大小*/
      border-width: 0;
      box-shadow: inset 3px 3px 3px hsl(0deg 0% 100% / 25%), inset -3px -3px 3px rgb(0 0 0 / 25%);
    }