<!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];
// 滾動條初始狀態(tài)的長度 = (盒子高度 / 內容高度 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>
兩個算法：
-
滾動條初始狀態(tài)的長度 = 盒子高度 / 內容高度 * 盒子高度。 -
內容盒子移動的距離 =（內容的高度 - 盒子的高度）/ （盒子的高度 - 滾動條的高度）* 滾動條移動的距離沪斟。
