模拟滚动条
描述：由于浏览器的渲染内核不一样，当页面过长或者过宽的时候，出现的滚动条的样式不一致，所以我们可以自己写滚动条。当文字过多的时候，就会出现滚动条，滚动条的宽度和内容的多少成反比。用户可以通过拖拉滚动条的方式查看全部内容。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟滚动条</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 500px;
border: 1px solid #84fcff;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.scroll {
width: 20px;
height: 530px;
background-color: #ccc;
position: absolute;
top: 0;
right: 0;
}
.bar {
width: 20px;
background-color: #84fcff;
border-radius: 10px;
cursor: pointer;
position: absolute;
top: 0;
}
.content {
padding: 15px;
text-align: center;
font: 700 180px/200px "宋体";
}
</style>
<script>
window.onload = function () {
//获取相关元素
var box = document.getElementById("box");//包裹内容最外层的盒子
var content = box.children[0];//内容区域
var scroll = box.children[1];//滚动条区域
var bar = scroll.children[0];//滚动条
//比例：内容的高/盒子的高 = scroll的高/bar的高 => bar的高 = 盒子的高*scroll的高/内容的高
var barHeight = box.offsetHeight*scroll.offsetHeight/content.offsetHeight;//获取滚动条的高度
bar.style.height = barHeight+"px";//赋值
bar.onmousedown = function (event) {
event = event || window.event;
//获取位置
var pageyy = event.pageY || scroll().top + event.clientY;//获取鼠标的位置
var y = pageyy - bar.offsetTop;//获取鼠标在盒子中的位置
//鼠标移动事件
document.onmousemove = function (event) {
event = event || window.event;
//鼠标移动后的位置
var pagey = event.pageY || scroll().top + event.clientY;
//移动后鼠标在盒子中的位置
pagey = pagey - y;
//防止越界
if(pagey<0){
pagey = 0;
}
if(pagey>scroll.offsetHeight - bar.offsetHeight){
pagey = scroll.offsetHeight - bar.offsetHeight;
}
//bar的移动
bar.style.top = pagey+"px";
//求出内容的移动距离：内容走的距离/bar走的距离 = （内容的高-大盒子的高）/（scroll的高-bar的高）
var s = pagey*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
//内容移动
content.style.marginTop = -s+"px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
//鼠标松开解绑事件
document.onmouseup = function () {
document.onmousemove = null;
}
}
</script>
</head>
<body>
<div class="box" id="box">
<div class="content">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
结束
</div>
<div class="scroll">
<div class="bar"></div>
</div>
</div>
</body>
</html>