模拟垂直滚动条

最新推荐文章于 2019-07-28 00:34:37 发布

Surpass-oneself

最新推荐文章于 2019-07-28 00:34:37 发布

阅读量271

点赞数

分类专栏： javascript

javascript 专栏收录该内容

18 篇文章

订阅专栏

一，模拟垂直滚动条的事件分析

首先是，滚动条和内容的位置，应该是同级关系，所以我们需要把他们放入到同一个盒子中。在拖动滚到条的时候内容跟着变化。

二、效果实现，首先是获取元素，内容、盒子、滚动条。然后，分析滚动条的大小和内容的高度之间的关系。再确定事件，想想用了什么事件，首先是onmousedown事件，然后是onmousemove鼠标移动。在鼠标移动的过程中，又有几个问题，移动的时候滚动条的大小怎么判断。内容的高度是如何变化？然后是如果移动的滚动轴超出盒子怎么办，向上移动，滚动条的高度是如何设置。

<!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>
var box = document.getElementById("box"); // 最大的盒子
var content = box.children[0]; // 内容盒子
var scroll = box.children[1]; // 右边盒子
var bar = scroll.children[0];
// 1. 首先先要计算红色滚动条的高度内容越多，滚动条越短反之反之
// 滚动条的长度计算公式: 容器的高度 / 内容的高度 * 容器的高度
// box 是内容盒子一半那么红色盒子也要是box盒子的一半
var barHeight = box.offsetHeight / content.offsetHeight * box.offsetHeight;
bar.style.height = barHeight + "px";
// 下面开始拖动红色盒子
startScroll(bar,content); // 第一次参数拖动的第二个参数内容的盒子
function startScroll(obj,target) {
obj.onmousedown = function(event) {
// alert(11);
var event = event || window.event;
var t = event.clientY - this.offsetTop ; // 红色盒子距离父亲盒子顶部距离
var that = this; // 把 bar 对象给 that 对象
document.onmousemove = function(event) {
var event = event || window.event;
var barTop = event.clientY - t ; // 红色移动的距离
//内容盒子要移动距离
// （内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒子的高度) * 红色盒子移动的数值
var contentTop = (target.offsetHeight - target.parentNode.offsetHeight) / (target.parentNode.offsetHeight - that.offsetHeight) * barTop;
// 内容盒子移动的距离
if(barTop < 0)
{
barTop = 0;
}
else if(barTop > target.parentNode.offsetHeight - that.offsetHeight)
// 大于大盒子的高度 - 红色盒子的高度
{
barTop = target.parentNode.offsetHeight - that.offsetHeight ;
}
else
{
target.style.top = -contentTop + "px"; // 往上走是负值
}
that.style.top = barTop + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动滑块的时候，选中文字
}
}
document.onmouseup = function() {
document.onmousemove = null;
}
}
</script>