Css 自定义滚动条样式

最新推荐文章于 2024-05-17 04:04:51 发布

12程序猿

最新推荐文章于 2024-05-17 04:04:51 发布

阅读量171

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/qq_26383975/article/details/107179908

版权

Css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css实现自定义滚动条样式：
1.效果图：
在这里插入图片描述
2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css 自定义滚动条样式</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <style>
    .main{
      width:660px;
      height: 360px;
      background: rgba(255,255,255,1);
      opacity: 0.88;
    }
    .zxggDiv{
      width:100%;
      height: 320px;
      overflow-x: hidden;
      overflow-y: auto
    }
    .zxggDiv::-webkit-scrollbar {/*滚动条整体样式*/
      width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
   .zxggDiv::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: #60c8ff;
    }
   .zxggDiv::-webkit-scrollbar-track {/*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 10px;
      background: #f2f2f2;
    }
</style>
</head>
<body>
  <div class="main">
    <div class="zxggDiv" >
     <pre> 
       滚动条组成部分
      1. ::-webkit-scrollbar 滚动条整体部分
      2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）
      3. ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
      4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
      5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
      6. ::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方
      7. ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件
    </pre>
    <img src="https://images2018.cnblogs.com/blog/940884/201808/940884-20180816152620621-1300097326.png">
    </div>
</div>
  
</body>
</html>

12程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css 自定义滚动条样式

css实现自定义滚动条样式：1.效果图：2.代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css 自定义滚动条样式</title> <script src
复制链接

扫一扫