JavaScript实现垂直滚动条效果

本文实例为大家分享了射流研究…垂直滚动条的实现代码，供大家参考，具体内容如下

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

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

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

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

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

htmlhead meta charset='UTF-8 '标题垂直滚动条/title style * { padd : 0；保证金： 0；} .盒子{宽度： 300像素高度： 500像素；border: 1px纯红；填充-右侧： 20px余量： 100像素相对位置：} .内容{ padding: 5px 18px 10px 5px绝对位置：左： 0；top :-10px；} .滚动{位置：绝对值；top : 0；右： 0；背景色： # CCC宽度： 20px高度： 100%;} .条形{宽度： 100%；高度： 20像素背景-颜色：红色；边框半径： 10px绝对位置：左： 0；top : 0；光标：指针；}/style/head body div class=' box ' id=' box ' div class=' content '三观不同，一句话都嫌多。我想，人和人之间一定存在磁场这回事，沿着三观向外辐射……/div class=' scroll ' div class=' bar '/div/div/div脚本var box=文档。getelementbyid(' box ')；var content=box。子级[0]；var scroll=box。孩子[1]；var bar=滚动。子级[0]；//计算滚动条红色酒吧的长度：容器长度/内容长度* 容器长度，比例关系酒吧。风格。高度=盒子。抵消重量/内容。偏移右侧*框。偏移右侧“px”；酒吧。onmousedown=function(event){ var event=event | | window。事件；var y=事件。客户-这个。偏移；文件。onmousemove=function(event){ var event=event | | window。事件；var top=事件。clienty-y；if(top 0)top=0；否则，如果（顶部滚动条。偏右栏。偏右)顶部=滚动条。偏右栏。偏右；酒吧。风格。top=top“px”；//(内容盒子高度-大盒子高度)/(大盒子高度-红色盒子的高度) * 红色盒子移动的数值内容。风格。top=-(内容。偏移灯箱。偏置右侧)/(框。偏移灯条。偏移高度)*顶部' px；window.getSelection？window.getSelection().removeAllRanges():文档。选择。empty()；//防止拖动滑块的时候，选中文字} }文档。onmouseup=function(){ document。onmousemove=null}/脚本/正文/html效果：

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