<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 300px;
height: 500px;
border: 1px solid red;
margin: 100px;
position: relative;
}
.content {
height: auto;
padding: 5px 18px 5px 5px;
position: absolute;
top: 0;
left: 0;
}
.scroll {
width: 18px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: #eee;
}
.bar {
width: 100%;
height: 100px;
background-color: red;
cursor: pointer;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="content">
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
</div>
<div class="scroll">
<div class="bar"></div>
</div>
</div>
</body>
</html>
<script>
//获取dom对象
var box = document.getElementById("box");
var content = box.children[0];
var scroll = box.children[1];
var bar = scroll.children[0];
// 滚动条初始状态的长度 = (盒子高度 / 内容高度 X 盒子高度)
bar.style.height = box.offsetHeight / content.offsetHeight * box.offsetHeight + "px";
// 鼠标按下事件
bar.onmousedown = function (e) {
var e = e || window.e;
// 鼠标按下时距离滚动条上方的位置
var y = e.clientY - this.offsetTop;
// 鼠标移动事件
document.onmousemove = function (e) {
var e = e || window.e;
// 滚动条移动距离
var barTop = e.clientY - y;
// 如果距离上方距离小于0，无法移动
if (barTop < 0) {
barTop = 0;
}
// 大于盒子的高度 - 滚动条的高度也无法移动
if (barTop > box.offsetHeight - bar.offsetHeight) {
barTop = box.offsetHeight - bar.offsetHeight
}
bar.style.top = barTop + "px";
//禁止选择文字
window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty();
// 内容盒子移动的距离 =（内容的高度 - 盒子的高度）/ （盒子的高度 - 滚动条的高度）* 滚动条移动的距离
var cy = (content.offsetHeight - box.offsetHeight) / (box.offsetHeight - bar.offsetHeight) * barTop;
content.style.top = - cy + "px";
}
// 鼠标弹起清除移动事件
document.onmouseup = function () {
this.onmousemove = null;
}
}
</script>
两个算法：
-
滚动条初始状态的长度 = 盒子高度 / 内容高度 * 盒子高度。 -
内容盒子移动的距离 =（内容的高度 - 盒子的高度）/ （盒子的高度 - 滚动条的高度）* 滚动条移动的距离。
