用 div 实现自制滚动条

最新推荐文章于 2024-07-20 18:16:53 发布

切糕糕

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量2.5k

点赞数 1

文章标签： HTML CSS3 前端 HTML+CSS3 JavaScript

本文链接：https://blog.csdn.net/supergao222/article/details/79635016

版权

https://math-digital.cn/blog/11

摘要由CSDN通过智能技术生成

用 div 实现自制滚动条

滚动条是浏览器中最常见的组件了。然而，滚动条的颜值总是不能令人满意，特别是嵌入在页面中的滚动条:

$image.png$

漂亮的网页突然出现一根灰灰的滚动条真是太煞风景了。虽然浏览器也提供了一些伪类能改善滚动条的外观，但改善程度也是有限。为什么不自己用 div 实现一根萌萌的滚动条呢，比如这根：

$贪吃蛇滚动条$

今天就来讲讲如何用 div 自己实现滚动条。

1. 先得有滚动条

在开始之前，我们要先隐藏浏览器本身的滚动条，加上自制的滚动条

<body>
  <div id="container">
    <div class="scrollbar"></div>
    bla bla bla ... 一大段一屏显示不下的内容
  </div>
</body>

我们在需要滚动条的 div 中增加了一个 class="scroll" 的 div 代表滚动条，给这个 div 来点样式：

html, body, #container {
    height: 100%;
    margin: 0;
}
#container {
    padding: 2rem;
    box-sizing: border-box; // 为了设置padding时不增加元素本身高度，避免出现滚动条
    overflow-y: hidden; // 隐藏浏览器本身的滚动条
    position: relative;
    padding-right: 30px; // 给自制滚动条留点空间，不要其他内容重合了
}
.scrollbar {
    height: 166px;
    width: 20px;
    border-radius: 20px;