HTML标签自定义滚动条样式 

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML标签自定义滚动条样式</title>
  <style>
    .content{
        height:200px;
        overflow:auto;
        white-space: pre-line;
    }
    .content::-webkit-scrollbar{
        width:8px;
        height:8px;
        background-color: #61B6EB;
    }
    .content::-webkit-scrollbar-track{
        background: #eee;
    }
    .content::-webkit-scrollbar-thumb{
        background: #61B6EB;
        border-radius:100px;
    }
    .content::-webkit-scrollbar-thumb:hover{
        background: #61B6EB;
    }
    .content::-webkit-scrollbar-corner{
        background: #61B6EB;
    }
  </style>
</head>
<body>
  <div class="content">
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
    2022年11月30日
  </div>
</body>
</html>

 

posted @ 2022-11-30 10:42  李健威  阅读(1521)  评论(0)    收藏  举报