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);
      }
      

---

整理不易，觉得有帮助的话还望点个赞

———By 🧑🏻‍💻 × Fluox