关于前端:HTML修改滚动条样式

间接上代码吧

      .test-div {
        width: 100px;
        max-height: 100px;
        padding-right: 12px;
        overflow-y: auto;
      }
      /* 滚动条整体款式 */
      .test-div::-webkit-scrollbar {
        width: 16px; /* y 轴滚动条的宽度 */
        height: 16px; /* x 轴滚动条的高度 */
        scrollbar-arrow-color: rgba(41, 96, 148, 0.8); /* 滚动箭头的箭头元素的色彩 */
      }
      /* 滚动条外面小方块 */
      .test-div::-webkit-scrollbar-thumb {
        border-radius: 8px;
        -webkit-box-shadow: inset 0 0 5px rgba(81, 168, 190, 0.8);
        background: rgba(41, 96, 148, 0.8);
        scrollbar-arrow-color: rgba(41, 96, 148, 0.8);  /* 滚动箭头的箭头元素的色彩 */
      }
      /* 滚动条外面轨道 */
      .test-div::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(30, 78, 100, 0.2);
        border-radius: 8px;
        background: rgba(40, 73, 104, 0.2);
      }