详解如何⽤div实现⾃制滚动条
滚动条是浏览器中最常见的组件了。然⽽，滚动条的颜值总是不能令⼈满意，特别是嵌⼊在页⾯中的滚动条:
漂亮的⽹页突然出现⼀根灰灰的滚动条真是太煞风景了。虽然浏览器也提供了⼀些伪类能改善滚动条的外观，但改善程度也是有限。为什么不⾃⼰⽤ 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; // 设置滚动条在最右边
}
设置纵向自动滚动条css⼀个简易的滚动条就有了：
虽然⽐浏览器默认的滚动条好不到哪⼉去，不过你可以⾃由发挥，把GIF动图作为滚动条也是可以的。由于滚动条是 absolute 定位的，后⾯就通过 top 属性来控制滚动条的位置。
现在滚动条还是静态的，想要让他动起来，就要先了解下滚动条与⽂档滚动的关系。
2. 滚动条与⽂档滚动的关系
先看这张图
蓝⾊框代表⼀个很长的⽂档，⽂档的⾼度可以通过 scrollHeight 属性获得。
屏幕⼀下⼦显⽰不了那么多内容，只能显⽰红⾊区域部分，红⾊区域就称为”视⼝“（Viewport），视⼝的⾼度可以通过offsetHeight 属性获得。
页⾯刚加载时，视⼝的顶部和⽂档顶部是重合的，滚动条（绿⾊竖条）也在最顶部。当我们将滚动条下拉时，⽂档的内容在向上滚动，其实是视⼝在向下移动：
视⼝向下移动后，与⽂档顶部就有了个偏移，这个偏移可以通过 scrollTop 获得。视⼝下移的同时，滚动条与顶部也有⼀段距离了，暂且⽤ h 表⽰。
视⼝⾥⽂档顶部的最⼤距离可以是多少？根据图可以看出是 scrollHeight - offsetHeight；类似地，滚动条最⼤可以滚动的距离是 offsetHeight - barHeight，其中 barHeight 是滚动条本⾝的⾼度。
看到这⾥你是否有些明⽩了，滚动条滚动的距离，与⽂档视⼝离开顶部的距离是成⼀定⽐例的。滚动条滑动多少距离，⽂档视⼝就按⽐例滑动多少距离。⽽这个⽐例值就等于：
ratio = (scrollHeight - offsetHeight) / (offsetHeight - barHeight)
假设⽂档总长 5000px，视⼝⾼度1080px，滚动条滑块⾼ 40px，那么根据公式计算出⽐例值是 3.77。也就是说，滚动条每滚动 1px，视⼝就要下移 3.77px
利⽤这个⽐例值，我们就可以让滚动条和视⼝等⽐例地进⾏滑动了。
3. 通过JavaScript控制滚动条
在⾃制的滚动条中，滚动通过两种事件触发，我们需要⾃⼰处理事件：
1. ⿏标滚轮滚动时，更新视⼝位置，同时按⽐例更新滚动条的位置
2. ⿏标拖拽滚动条时，更新滚动条位置，同时按⽐例更新视⼝位置
3.1 ⿏标滚轮事件
⿏标滚轮滚动时，会触发 mousewheel 事件，此时需要根据滚动增量（e.deltaY）更新视⼝位置，在根据新的视⼝位置推算出滚动条的位置。代码：
container.addEventListener('mousewheel', function(e) {
this.scrollTop += e.deltaY;
this.p = (this.scrollTop + this.scrollTop / this.ratio) + 'px';
});
可以看到，滚动条的 top 值就是当前视⼝的偏移（scrollTop）加上这个偏移的按⽐例缩⼩。
3.2 ⿏标拖拽事件
JavaScript 原⽣没有拖拽事件，需要⽤左键点下（mousedown），⿏标移动（mousemove），左键放开（mouseup）三个事件配合模拟出拖拽效果：
container.addEventListener('mousedown', function (e) {
if (e.target === this.scrollbar) {
this.prevY = e.pageY;
}
});
container.addEventListener('mouseup', function (e) {
this.prevY = null;
});
container.addEventListener('mousemove', function (e) {
if (this.prevY) {
// 此时可以确定⽤户在表⽰拖拽
}
e.preventDefault();
});
上⾯的代码在处理 mousemove 事件时使⽤ e.preventDefault() 阻⽌浏览器默认动作，您可以⾃⾏尝试加上和不加这⾏的效果。接着上⾯的代码，我们处理拖拽动作：
if (this.prevY) {
// 此时可以确定⽤户在表⽰拖拽
this.scrollTop += (e.pageY - this.prevY) * this.ratio;
this.p = (this.scrollTop + this.scrollTop / this.ratio) + 'px';
this.prevY = e.pageY;
}
与滚轮滚动不同，JavaScript没有给出每次拖拽的移动增量，需要⾃⼰计算，并每次存储上⼀次的⿏标位置。
⾄此⼀个可⽤的⾃制滚动条就完成了。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body, #container {
height: 100%;
margin: 0;
}
#container {
padding: 2rem;
box-sizing: border-box;
overflow-y: hidden;
position: relative;
padding-right: 30px;
}
.
scrollbar {
height: 166px;
width: 20px;
border-radius: 20px;
background: #ccc;
position: absolute;
right: 0;
}
</style>
<script>
var scrollbar = document.querySelector('.scrollbar');
var container = scrollbar.parentNode;
container.scrollbar = scrollbar;
container.ratio =
(container.scrollHeight - container.offsetHeight) / (container.offsetHeight - scrollbar.offsetHeight); container.addEventListener('mousewheel', function(e) {
this.scrollTop += e.deltaY;
this.p = (this.scrollTop + this.scrollTop / this.ratio) + 'px';
});
container.addEventListener('mousedown', function (e) {
if (e.target === this.scrollbar) {
this.prevY = e.pageY;
}
});
container.addEventListener('mouseup', function (e) {
this.prevY = null;
});
container.addEventListener('mousemove', function (e) {
if (this.prevY) {
this.scrollTop += (e.pageY - this.prevY) * this.ratio;
this.p = (this.scrollTop + this.scrollTop / this.ratio) + 'px';
this.prevY = e.pageY;
}
e.preventDefault();
});
}
</script>
</head>
<body>
<div id="container">
<div class="scrollbar"></div>
bla, bla, ⼀⼤段很长的⽂字
</div>
</body>
</html>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论