思路：
效果：
<!DOCTYPE html>
<html>
<head>
<style>
.scrollCon {
width: 50px;
height: 300px;
border: 1px solid black;
position: relative;
float: left;
}
.item {
width: 50px;
height: 50px;
background: green;
border-radius: 100%;
position: absolute;
left: 0px;
}
.model {
height: 300px;
background: yellow;
overflow: auto;
width: 200px;
float: left;
}
</style>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
</head>
<body>
<!-- 需要滚动的内容 -->
<div class="model">
开始
<br> 务实
<br> 真诚
<br> 创新
<br> 绿水青山
<br> 务实
<br> 真诚
<br> 创新
<br> 绿水青山
<br> 务实
<br> 真诚
<br> 创新
<br> 绿水青山
<br> 务实
<br> 真诚
<br> 创新
<br> 绿水青山
<br>结束
</div>
<!-- 滚动条容器 -->
<div class="scrollCon">
<!-- 滚动条 -->
<div class="item" style="top:0px;"></div>
</div>
<script>
// 获取滚动条容器
var scrollCon = document.querySelector(".scrollCon");
// 获取滚动条
var item = document.querySelector(".item");
// 计算滚动条在绝对定位下不超出滚动容器的最大top值
var itemMaxTop = scrollCon.offsetHeight - item.offsetHeight;
// 获取内容对象
var model = document.querySelector(".model");
// 获取内容对象的高度
var modelHeight = model.offsetHeight;
// 获取内容对象的滚动高度
var modelScrollHeight = model.scrollHeight;
// 计算内容对象的最大scrollTop值
var scrollMaxHeight = modelScrollHeight - modelHeight;
// 计算滚动条最大top值和内容对象的最大scrollTop值的比例
var scale = itemMaxTop / scrollMaxHeight;
// 设置鼠标按下为false
var isMouseDown = false;
// 设置鼠标开始的y坐标
var mouseStartY = 0;
// 设置鼠标结束的y坐标
var mouseEndY = 0;
// 监听滚动条鼠标按下
item.addEventListener("mousedown", function(e) {
// 设置鼠标按下为true
isMouseDown = true;
// 赋值鼠标开始的y坐标
mouseStartY = e.clientY
}, false);
// 监听文档的鼠标移动
document.addEventListener("mousemove", function(e) {
// 当鼠标按下时
if (isMouseDown) {
// 赋值鼠标结束坐标
mouseEndY = e.clientY;
// 计算滚动条的top值
item.style.top = (parseFloat(item.style.top) + (mouseEndY - mouseStartY)) + "px"
// 处理滚动条条的边界-最小值
if (parseFloat(item.style.top) <= 0) {
item.style.top = "0px";
}
// 处理滚动条条的边界-最大值
if (parseFloat(item.style.top) >= itemMaxTop) {
item.style.top = itemMaxTop + "px";
}
// 设置内容区的scrollTop
model.scrollTop = (parseFloat(item.style.top) / scale);
// 更新鼠标开始坐标
mouseStartY = mouseEndY;
}
}, false);
// 监听文档鼠标抬起
document.addEventListener("mouseup", function() {
// 设置鼠标按下为false
isMouseDown = false;
}, false);
// 监听内容的滚动事件
model.addEventListener("scroll", function() {
// 当鼠标抬起时
if (!isMouseDown) {
// 动态设置滚动条的top值
item.style.top = (model.scrollTop * scale) + "px";
}
}, false);
</script>
</body>
</html>
