<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 500px;
border: 1px solid red;
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: red;
border-radius: 10px;
cursor: pointer;
position: absolute;
top: 0;
}
.content {
padding: 15px;
}
</style>
<script src="animate.js"></script>
<script>
window.onload = function () {
//需求:模拟滚动条,鼠标拖动滚动条,滚动条动,而且内容等比例联动。
//步骤:
//1.根据内容和盒子的比例确定bar的高。
//2.绑定事件(鼠标按下,然后移动)
//3.鼠标移动,bar联动
//4.内容等比例联动
//0.获取相关元素
var boxDiv=document.getElementById("box");
var contentDiv=boxDiv.children[0];
var scrollDiv=boxDiv.children[1];
var barDiv=scrollDiv.children[0];
var barHeight=(scrollDiv.offsetHeight*boxDiv.offsetHeight)/contentDiv.offsetHeight;
barDiv.style.height=barHeight+"px";
barDiv.onmousedown=function (event) {
event=event||window.event;
var pageY=event.pageY||scroll().top+event.clientY;
console.log("pageY:"+pageY);
var gap=pageY-barDiv.offsetTop; //鼠标距离bar顶端的间距
console.log("barDiv.offsetTop:"+barDiv.offsetTop);
console.log("gap:"+gap);
document.onmousemove=function (event) {
event=event||window.event;
var pageYY=event.pageY||scroll().top+event.clientY;
pageYY=pageYY-gap;
if(pageYY<0)
{
pageYY=0;
}
if(pageYY>(scrollDiv.offsetHeight-barDiv.offsetHeight))
{
pageYY=scrollDiv.offsetHeight-barDiv.offsetHeight;
}
barDiv.style.top=pageYY+"px";
//大的在上面,下的在下面
//内容走的距离/bar走的距离=(内容-大盒子)/(scroll-bar)
//内容走的距离=bar走的距离*(内容-大盒子)/(scroll-bar)
var contenY=pageYY*(contentDiv.offsetHeight-boxDiv.offsetHeight)/(scrollDiv.offsetHeight-barDiv.offsetHeight);
contentDiv.style.marginTop=-contenY+"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">
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
孩儿励志出湘关,学不成名终不还。<br>
埋骨何须桑梓地,人生无处不青山。<br>
-------------结束------------<br>
</div>
<div class="scroll">
<div class="bar"></div>
</div>
</div>
</body>
</html>
模拟滚动条
最新推荐文章于 2024-07-29 09:26:52 发布