滚动条是浏览器中最常见的组件了。然而，滚动条的颜值总是不能令人满意，特别是嵌入在页面中的滚动条:
漂亮的网页突然出现一根灰灰的滚动条真是太煞风景了。虽然浏览器也提供了一些伪类能改善滚动条的外观，但改善程度也是有限。为什么不自己用 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; background: #ccc; position: absolute; // 绝对定位，方便设置滚动条位置 right: 0; // 设置滚动条在最右边} |
一个简易的滚动条就有了：
虽然比浏览器默认的滚动条好不到哪儿去，不过你可以自由发挥，把GIF动图作为滚动条也是可以的。由于滚动条是 absolute 定位的，后面就通过 top 属性来控制滚动条的位置。
现在滚动条还是静态的，想要让他动起来，就要先了解下滚动条与文档滚动的关系。
2. 滚动条与文档滚动的关系
先看这张图
蓝色框代表一个很长的文档，文档的高度可以通过 scrollHeight 属性获得。
屏幕一下子显示不了那么多内容，只能显示红色区域部分，红色区域就称为”视口“（Viewport），视口的高度可以通过 offsetHeight 属性获得。
页面刚加载时，视口的顶部和文档顶部是重合的，滚动条（绿色竖条）也在最顶部。当我们将滚动条下拉时，文档的内容在向上滚动，其实是视口在向下移动：
新闻热点
疑难解答
