Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

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

  昨天说了鼠标滚轮事件,今天就给大家个例子。我们做个滚动条来使用它。首先,我们需要构建滚动条的HTML。我们需要的元素有:总容器、内容容器、滚动条容器、滚动条按钮,这么几个元素。就像下面这样 <div id="panel">
  <div id="contents">
    关关雎鸠,在河之洲。<br/>
    窈窕淑女,君子好逑。<br/>
    参差荇菜,左右流之。<br/>
    窈窕淑女,寤寐求之。<br/>
    求之不得,寤寐思服。<br/>
    悠哉悠哉,辗转反侧。<br/>
    参差荇菜,左右采之。<br/>
    窈窕淑女,琴瑟友之。<br/>
    参差荇菜,左右笔之。<br/>
    窈窕淑女,钟鼓乐之。<br/>
  </div>
  <div id="scrollbar">
    <a id="scrollbtn" href="JavaScript:;"></a>
  </div>
</div>
  主容器是用来给里面的东西定位的。内容容器是在滚动的时候调整它的位置以显示给用户需要的部分,这个内容容器其实也可以使用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);

  好了,注释已经非常详细了。注释中已经把滚动条的计算方法说的很清楚了,如果你想实现滚动条的拖动,根据上面说的计算方法也很容易实现。如果还有什么不明白的可以提问。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^