滚动条样式

 <div class="sss">
   较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出
  </div>
</template>

<style>
  .sss{
    width:200px;
    height:150px;
      overflow-x: hidden;
      overflow-y: auto;
  }
/*滚动条样式*/

.sss::-webkit-scrollbar {/*滚动条整体样式*/

        width:4px;/*高宽分别对应横竖滚动条的尺寸*/

        height:4px;

}

.sss::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

        border-radius:5px;

        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);

        background:rgba(0,0,0,0.2);  /*设置滚动条颜色*/

}

.sss::-webkit-scrollbar-track {/*滚动条里面轨道*/

        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);

        border-radius:0;

        background:rgba(0,0,0,0.1);

}

  

posted @ 2023-06-09 15:04  Ali枝  阅读(7)  评论(0编辑  收藏  举报