关关雎鸠，在河之洲。
窈窕淑女，君子好逑。
参差荇菜，左右流之。
窈窕淑女，寤寐求之。
求之不得，寤寐思服。
悠哉悠哉，辗转反侧。
参差荇菜，左右采之。
窈窕淑女，琴瑟友之。
参差荇菜，左右笔之。
窈窕淑女，钟鼓乐之。
主容器是用来给里面的东西定位的。内容容器是在滚动的时候调整它的位置以显示给用户需要的部分，这个内容容器其实也可以使用scrollTop来实现，不过我比较喜欢使用top来实现。scrollTop的方法的优点是会自动计算滚动的上下限，top的方法我也说不出优点，也许是以前开发桌面程序的缘故，总是觉得top比较有实感。接着是滚动条容器和滚动条按钮。滚动条容器就是整个滚动条的部分，滚动条按钮就是在滚动条容器中可以滑动的那个滑块。滚动条按钮用a标签来做比较好，因为a标签的hover可以兼容低版本浏览器，所以用它效果会更好。
接着是CSS的部分
#panel {
height:100px;width:200px;
overflow:hidden;
border:1px solid #CCC;
position:relative;
}
#contents {
position:absolute;
top:0px;left:0px;
font:14px/20px 微软雅黑;
}
#scrollbar {
width:1px;height:90px;
margin:5px;
background:#EEE;
position:absolute;
top:0px;right:0px;
}
#scrollbtn {
position:absolute;
width:5px;left:-2px;
background:#000;
cursor:default;
}
#scrollbtn:hover {background:#888;}
CSS我就不逐行解释了，看了效果自然会明白。
最后也是最重要的就是JS部分。由于这个滚动条效果是随手写的，没有做的很完善，而且这篇文章主要是想介绍鼠标滚轮事件的应用，所以对滚动条我只做了鼠标滚轮的响应。如果需要滚动条的，拖动、点击定位，等效果。就自己研究了写吧，如果真写不出，就吱个声，那样我下次就再写一篇文章来说其它的几个效果。下面是JS代码
//判断浏览器
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE=isIE?isIE[1]:undefined;
var isFF=/FireFox/i.test(navigator.userAgent);
//声明变量
var panel,contents,scrollbar,scrollbtn,panel_h,c_h,s_h;
//获取元素
contents=document.getElementById("contents"),
scrollbar=document.getElementById("scrollbar"),
scrollbtn=document.getElementById("scrollbtn");
panel=document.getElementById("panel");
//计算容器高度
//如果这里直接用offsetHeight会获取到包含边框的高度
panel_h=parseInt(
isIE<9?panel.currentStyle.height
:getComputedStyle(panel).height
);
//计算滚动条按钮的高度
//如果把内容容器比作滚动条容器
//那么内容的可见部分就是滚动条按钮的高度
//而内容的可见部分就是总容器的高度
//所以这里使用总容器高度除以内容容器高度
//如果你想做内容不足就不出滚动条
//你可以在这里判断高度，不符合就隐藏掉滚动条
scrollbtn.style.height=(
panel_h/contents.offsetHeight*100
)+"%";
//计算内容可移动的大距离
c_h=contents.offsetHeight-panel_h;
//计算滚动条可移动的大高度
s_h=scrollbar.offsetHeight-scrollbtn.offsetHeight;
//创建move方法来移动内容和滚动条
//这个方法的参数是鼠标滚轮滚动的格数
panel.move=function(i){
//计算内容位置
//这里的20是内容的行高，当然也可以是其它值
//但是使用内容的行高对于用户来说是最友好的
var top=contents.offsetTop+(20*i);
//处理位置上下限，防止滚动条溢出
//如果使用scrollTop的方法来做就不需要这个步骤
if(top>0)top=0;
if(top<-c_h)top=-c_h;
//移动内容位置
contents.style.top=top+"px";
//移动滚动条按钮位置
//这个计算的原理其实很简单
//滚动条容器和滚动条按钮与内容容器和内容可见高度是等比例关系
scrollbtn.style.top=-top/c_h*s_h+"px";
};
//最后是鼠标滚轮事件
//这里同时设置了DOMMouseScroll和onmousewheel事件
//所以可以全兼容，事件参数则在事件中再做判断
//这个做法的效率不如昨天的完整代码效率高
//但是鼠标滚轮是一个慢事件，我们可以不要太在乎效率
//至少，这次的代码比昨天的简单了好多
panel.addEventListener("DOMMouseScroll",
panel.onmousewheel=function(e){
e=e||event;
//判断浏览器，并计算事件参数
var v=isFF?-e.detail/3:e.wheelDelta/120;
panel.move(v);
isIE<9||e.preventDefault();
return false;
}
,false);
好了，注释已经非常详细了。注释中已经把滚动条的计算方法说的很清楚了，如果你想实现滚动条的拖动，根据上面说的计算方法也很容易实现。如果还有什么不明白的可以提问。
本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！
本文标题：鼠标滚轮事件的应用简单的滚动条
当前地址：https://www.cdcxhl.com/news47/322047.html
成都网站建设公司_创新互联，为您提供网站收录、网站设计、做网站、、定制网站、动态网站
广告
![]()
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
创新互联
