CSS自定义滚动条样式

最新推荐文章于 2024-06-20 16:16:46 发布

MtiredM

最新推荐文章于 2024-06-20 16:16:46 发布

阅读量1.2k

点赞数 2

分类专栏： # css学习文章标签： CSS 滚动条样式自定义网页设计

本文链接：https://blog.csdn.net/MtiredM/article/details/121204839

版权

css学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS自定义滚动条样式

测试html内容

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
  <div class="test">
    测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条
  </div>
</body>
</html>

默认样式

.test{
  height: 200px;
  width: 200px;
  background-color: aquamarine;
  padding: 5px;
  overflow: auto;
}

默认样式效果

默认样式

自定义后样式

  /*滚动条整体样式,高宽分别对应横竖滚动条的尺寸*/
  .test::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    scrollbar-arrow-color:#898989;
  }
  /*滚动条里面小方块*/
  .test::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
    scrollbar-arrow-color:#898989;
  }
  /*滚动条里面轨道*/
  .test::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
  }

自定义样式效果

MtiredM

关注

2
点赞
踩
6

收藏

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

CSS自定义滚动条样式测试html内容<!DOCTYPE html><html lang="en"><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"> &lt
复制链接

扫一扫

专栏目录