js实现垂直滚动条
程序员文章站
2024-01-28 16:10:28
...
滚动条长度的计算公式 = 容器的高度/内容的高度*容器的高度
图例如下
滚动条滚动一次，内容移动的距离 = （内容的高度 - 容器的高度）/（容器的高度 - 滚动条高度）*滚动条移动的距离
代码如下
<!DOCTYPE html>
<html>
<head>
<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>效果图例