首页客户案例高端网站建设SEO优化小程序APP开发抖音 X 获客网络营销关于动态联系咨询

鼠标滚轮事件的应用 简单的滚动条

  
关关雎鸠,在河之洲。
窈窕淑女,君子好逑。
参差荇菜,左右流之。
窈窕淑女,寤寐求之。
求之不得,寤寐思服。
悠哉悠哉,辗转反侧。
参差荇菜,左右采之。
窈窕淑女,琴瑟友之。
参差荇菜,左右笔之。
窈窕淑女,钟鼓乐之。
  主容器是用来给里面的东西定位的。内容容器是在滚动的时候调整它的位置以显示给用户需要的部分,这个内容容器其实也可以使用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);

  好了,注释已经非常详细了。注释中已经把滚动条的计算方法说的很清楚了,如果你想实现滚动条的拖动,根据上面说的计算方法也很容易实现。如果还有什么不明白的可以提问。 本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司!

日期:2015年05月20日

标签: 广州网站设计公司 、 广州网站设计 、 广州网站建设公司 、 广州网站建设 、 广州网站制作公司 、 广州网站制作 、 高端网站设计 、 高端网站建设 、 广州高端网站设计 、 广州高端网站建设

获取您的项目定制及优化报价。

* 为广州天河、白云、海珠、番禺、花都、南沙区提供网站建设服务。
微信二维码15876521776免费获取诊断报告