小程序怎么制作_JavaScript完成垂直滚动条效果

JavaScript实现垂直滚动条效果       这篇文章为大家详细主要介绍了JavaScript实现垂直滚动条效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js垂直滚动条的实现代码,供大家参考,具体内容如下

1、红色盒子高度计算公式:

容器的高度 / 内容的高度 * 容器的高度

2、红色方块移动一像素 ,我们的内容盒子移动多少呢?

(内容盒子高度 - 大盒子高度) / (大盒子高度 - 红色盒子的高度) 计算倍数

(内容盒子高度 -  大盒子高度)/  (大盒子高度 - 红色盒子的高度)  * 红色盒子移动的数值

 html 
 head 
 meta charset="UTF-8" 
 title 垂直滚动条 /title 
 style 
 padding: 0;
 margin: 0;
 .box{
 width: 300px;
 height: 500px;
 border: 1px solid red;
 padding-right: 20px;
 margin: 100px;
 position: relative;
 .content{
 padding: 5px 18px 10px 5px;
 position: absolute;
 left: 0;
 top: -10px;
 .scroll{
 position: absolute;
 top: 0;
 right: 0;
 background-color: #ccc;
 width: 20px;
 height: 100%;
 .bar{
 width: 100%;
 height: 20px;
 background-color: red;
 border-radius: 10px;
 position: absolute;
 left: 0;
 top: 0;
 cursor: pointer;
 /style 
 /head 
 body 
 div id="box" 
 div 
 三观不同,一句话都嫌多。我想,人和人之间一定存在磁场这回事,沿着三观向外辐射。
 …………
 /div 
 div 
 div /div 
 /div 
 /div 
 script 
 var box = document.getElementById('box');
 var content = box.children[0];
 var scroll = box.children[1];
 var bar = scroll.children[0];
 //计算滚动条红色bar的长度:容器长度/内容长度 * 容器长度,,比例关系
 bar.style.height = box.offsetHeight / content.offsetHeight * box.offsetHeight +"px";
 bar.onmousedown = function(event){
 var event = event || window.event;
 var y = event.clientY - this.offsetTop;
 document.onmousemove = function(event){
 var event = event || window.event;
 var top = event.clientY - y;
 if(top 0)
 top =0;
 else if(top scroll.offsetHeight - bar.offsetHeight)
 top = scroll.offsetHeight - bar.offsetHeight;
 bar.style.top = top +"px";
 //(内容盒子高度 - 大盒子高度) / (大盒子高度 - 红色盒子的高度) * 红色盒子移动的数值
 content.style.top = -(content.offsetHeight - box.offsetHeight)/(box.offsetHeight - bar.offsetHeight)*top+"px";
 window.getSelection window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动滑块的时候, 选中文字
 document.onmouseup = function(){
 document.onmousemove = null;
 /script 
 /body 
 /html 

效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读