滚动条的样式

最新推荐文章于 2024-06-05 09:46:36 发布

sfanxi

最新推荐文章于 2024-06-05 09:46:36 发布

阅读量967

点赞数 4

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_36366212/article/details/89640022

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

滚动条整体样式

::-webkit-scrollbar {
      /* 纵向滚动条的宽 */
      width: 8px;
      /* 横向滚动条的高 */
      height: 8px;
      border: 2px solid red;
      background-color: #181c32;
    }

滚动条可拖动部分滑块样式

    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: black;
    }

滚动条内轨道

::-webkit-scrollbar-track{

}

滚动条悬停让滑块变宽，例如直接设置宽度并不行

 ::-webkit-scrollbar-thumb：hover {
      width:12px;
  }

解决方法关键代码：

::-webkit-scrollbar-thumb {
      background-clip: padding-box;
      border: 2px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
      background-clip: border-box;
}

如何让滚动条不占宽度

div定义的宽度 = 内容宽度+滚动条宽度

1.滚动条不可见达到不占宽度

出现滚动条会导致内容偏移，想让滚动条不占宽度不影响内容的排版但要可以滚动，可以设置

 ::-webkit-scrollbar {
      width: 0;
 }

2.滚动条可见达到不占宽度

...................

记录小例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>RegExp</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ::-webkit-scrollbar {
      /* 纵向滚动条的宽 */
      width: 8px;
      /* 横向滚动条的高 */
      height: 8px;
      /* border: 2px solid red;
      background-color: #181c32; */
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: black;
      background-clip: padding-box;
      border: 1px solid transparent;
    }
    ::-webkit-scrollbar-thumb:hover {
      background-clip: border-box;
    }

    .example-one-parent {
      /* box-sizing: border-box; */
      /* overflow: hidden; 可有可无 */
      width: 160px;
      height: 160px;
      padding: 10px;
      background: forestgreen;
    }

    .example-one-content {
      /* box-sizing: border-box; */
      height: 100%;
      overflow: auto;
      margin-right: -10px;
      padding-right: 10px;
    }

    .example-two-parent {
      /* box-sizing: border-box; */
      /* overflow: hidden; 让滚动条到容器外面去的话，不能加 */
      width: 160px;
      height: 160px;
      padding: 10px;
      background: forestgreen;
    }

    .example-two-content {
      /* box-sizing: border-box; */
      height: 100%;
      overflow: auto;
      margin-right: -18px;
      padding-right: 18px;
    }
  </style>
</head>

<body>

  <h1>案例1</h1>
  <!-- 增加父级是为了滚动过程中都有下padding -->
  <div class="example-one-parent">
    <div class="example-one-content">
      亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈
    </div>
  </div>
  <br />

  <h1>案例2</h1>
  <div class="example-two-parent">
    <div class="example-two-content">
      亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈亲爱的爸爸妈妈
    </div>
  </div>
</body>

</html>

sfanxi

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
滚动条的样式

滚动条整体样式::-webkit-scrollbar{ /* 纵向滚动条的宽 */ width: 8px; /* 横向滚动条的高 */ height:8px; border: 2px solid red; background-color: #181c32; }滚动条可拖动部分滑...
复制链接

扫一扫