你的位置:首页 > 网页设计

[网页设计]js原生封装自定义滚动条

 1 /*  2  * @Author: dothin前端 3  * @Date:  2015-11-21 00:12:15 4  * @Last Modified by:  dothin前端 5  * @Last Modified time: 2015-11-21 00:29:12 6 */ 7 ! function() { 8   var EventUtil = { 9     addHandler: function(obj, type, handler) { 10       if (obj.addEventListener) { 11         obj.addEventListener(type, handler, false); 12       } else if (obj.attachEvent) { 13         obj.attachEvent("on" + type, handler); 14       } else { 15         obj["on" + type] = handler; 16       } 17     }, 18     removeHandler: function(obj, type, handler) { 19       if (obj.removeEventListener) { 20         obj.removeEventListener(type, handler, false); 21       } else if (obj.detachEvent) { 22         obj.detachEvent("on" + type, handler); 23       } else { 24         obj["on" + type] = null; 25       } 26     }, 27     getEvent: function(event) { 28       return event ? event : window.event; 29     }, 30     getTarget: function(event) { 31       return event.target || event.srcElement; 32     }, 33     preventDefault: function(event) { 34       if (event.preventDefault) { 35         event.preventDefault(); 36       } else { 37         event.returnValue = false; 38       } 39     }, 40     stopPropagation: function(event) { 41       if (event.stopPropagation) { 42         event.stopPropagation(); 43       } else { 44         event.cancelBubble = true; 45       } 46     }, 47     getWheelDelta: function(event) { 48       if (event.wheelDelta) { 49         return event.wheelDelta; 50       } else { 51         return -event.detail * 40; 52       } 53     } 54   }; 55   //tip:滚动条上面的长度可变的按钮 56   //scrollBar:滚动条 57   //section:内容父级 58   //article:内容 59   function ScrollBar(tip, scrollBar, section, article) { 60     this.oTip = document.getElementById(tip); 61     this.oScrollBar = document.getElementById(scrollBar); 62     this.oSection = document.getElementById(section); 63     this.oArticle = document.getElementById(article); 64     var _this = this; 65     this.init(); 66     this.oTip.onmousedown = function(ev) { 67       _this.Down(ev); 68       return false; 69     }; 70     //给需要加滚动事件是元素加滚动事件 71     EventUtil.addHandler(this.oSection, 'mousewheel', function(ev) { 72       _this.onMouseWheel(ev); 73     }); //ie,chrome 74     EventUtil.addHandler(this.oSection, 'DOMMouseScroll', function(ev) { 75       _this.onMouseWheel(ev); 76     }); //ff 77     EventUtil.addHandler(this.oScrollBar, 'mousewheel', function(ev) { 78       _this.onMouseWheel(ev); 79     }); //ie,chrome 80     EventUtil.addHandler(this.oScrollBar, 'DOMMouseScroll', function(ev) { 81       _this.onMouseWheel(ev); 82     }); //ff 83   }; 84   //初始化滚动条,内容不够时隐藏滚动条,滚动条按钮长度由内容长度决定 85   ScrollBar.prototype.init = function() { 86     if (this.oSection.offsetHeight >= this.oArticle.offsetHeight) { 87       this.oScrollBar.style.display = 'none'; 88     } else { 89       this.oTip.style.height = 100 * this.oScrollBar.offsetHeight / (this.oArticle.offsetHeight - this.oSection.offsetHeight) + 'px'; 90       document.title = this.oTip.style.height; 91     } 92     //个浏览器行高,字体大小,字体类型,不一致,要想初始化滚动条一致,先统一样式 93   }; 94   ScrollBar.prototype.Down = function(ev) { 95     var oEvent = EventUtil.getEvent(ev); 96     var _this = this; 97     this.maxH = this.oScrollBar.offsetHeight - this.oTip.offsetHeight; 98     this.disY = oEvent.clientY - this.oTip.offsetTop; 99     document.onmousemove = function(ev) {100       _this.fnMove(ev);101       return false;102     }103     document.onmouseup = function(ev) {104       _this.Up(ev);105     }106   };107   ScrollBar.prototype.fnMove = function(ev) {108     var oEvent = EventUtil.getEvent(ev);109     var t = oEvent.clientY - this.disY;110     this.Move(t);111   };112   ScrollBar.prototype.onMouseWheel = function(ev) {113     var oEvent = EventUtil.getEvent(ev);114     this.maxH = this.oScrollBar.offsetHeight - this.oTip.offsetHeight;115     this.disY = oEvent.clientY - this.oTip.offsetTop;116     if (EventUtil.getWheelDelta(oEvent) > 0) {117       var t = this.oTip.offsetTop - 10;118       this.Move(t);119     } else {120       var t = this.oTip.offsetTop + 10;121       this.Move(t);122     }123     EventUtil.preventDefault(oEvent);124   };125   ScrollBar.prototype.Move = function(t) {126     if (t < 0) {127       t = 0;128     } else if (t > this.maxH) {129       t = this.maxH;130     }131     this.oTip.style.top = t + 'px';132     this.contentH = this.oArticle.offsetHeight - this.oSection.offsetHeight;133     this.oArticle.style.top = -this.contentH * this.oTip.offsetTop / this.maxH + 'px';134   };135   ScrollBar.prototype.Up = function(ev) {136     document.onmousemove = document.onmouseup = null;137   };138   window.ScrollBar = ScrollBar;139 }();

调用实例:

 1 <!DOCTYPE html> 2 <html lang="en" id="html"> 3 <head> 4   <meta charset="UTF-8" /> 5   <title>title here</title> 6   <script src="scrollBar.js"></script> 7   <style> 8     #section{position:absolute;top:200px; left:50px;width:300px; height:298px; border:1px solid #999; overflow: hidden; } 9     #article{position:absolute;padding:20px; text-indent: 30px;font-size: 14px; line-height: 25px; font-family: '微软雅黑';}10     #scrollBar{ position:absolute;top:0; right:0;height:300px; width:20px; background:#ddd;}11     #tip{position:absolute;top:0;left:0; background:#999; width:20px; min-height:20px; cursor:pointer;}12   </style>13 </head>14 <body id="body" style="height:2000px;">15   <div id="section">16     <div id="article">17       一滴血而已,居然带动天地大势,滚滚而涌,让大漠沸腾,沙浪拍天,所有人都在颤栗!18 19   异域百世20   一滴血,居然造成这种要灭世般的景象,怎能令人不畏?21  22   “不朽之王!”23  24   这一刻,异域百万大军顶礼膜拜后,全都高呼,他们激动,神色疯狂,带着敬仰。还有无比的崇敬,仰望血海。25  26   五色血液浩荡,真的如汪洋席卷而来,淹没这里。27   的杀气,滔天而上,滚滚沸腾。28 29   大旗横空,如银河翻卷。猎猎作响,绽放出刺目的光,上面有血迹,虽然过去了一个纪元,还未彻底干涸。30 31   因为,那是属于仙王的血,此时像是要滴落了下来,从旗面内不断渗出!32   万大军全都跪伏了下去,进行膜拜!33 34   刹那,域外诸多星斗都在摇动,整片大宇宙都要震荡起来,那种威势不可想象,撼天动地,岁月长河跟着浮现。35 36   一滴血而已,就造成了这般无法理解的恐怖景象!37 38   所有人都知道,那是异域的无上强者演绎的,真身过不来,洒出一滴血,跨过天渊,飞临这片战场中。39 40  一滴血,晶莹欲滴,绽放五色不朽之光,滚滚而来,看着很小一滴,但是气势磅礴,压的乾坤轰鸣,要崩溃了。41  42   帝关,城墙上。43  44   许多人胆寒,哪怕有巨城可守,难以攻破,众人也惶恐,神魂都在不由自主的颤栗。45  46   “我就知道,孟天正惹大祸了,我都已经谈好条件,他还出城,今日若有大难,他将是千古罪人!”金太君说道。47  48   至于各族修士,包括金系人马、杜家等都早已说不出话来,那种恐怖波动,让他们一个脸色苍白。49  50   许多人都觉得,不朽之王是不可战胜的,万一他们真的动身过来,城破了怎么办?51  52   “应该……不会跨界吧?”一些人颤声道,这是杜家的大统领。53  54   “跨界与否,一直是五五之数,就看他们的心意了!”金太君手拄着木杖说道。55  56   帝关前,出城作战的帝关修士自然也都面色发白了,虽然说他们很勇猛,无所畏惧,但是那种压迫让他们身体难受。57  58   轰!59  60   几件仙器发光,隔绝外界,绽放出一缕又一缕白雾,那是仙气在弥漫,守护了他们。61  62   然而,那滴血也发生了奇异的变化。迅速放大,如同汪洋一般,席卷了天上地下,迅速而来。铺天盖地。63  64   仿佛世界末日来临,震撼人间,所有人都惶恐,难以抗拒。65  66   域外,一颗又一颗星体都在跟着颤栗。在抖动,间要解体,要在这一刻崩开。67  68  69   “铁血战旗,不复苏更待何时!”孟天正站在那里,一招手,将那面破烂的战旗取到手中,一声大吼,而后猛力将它掷出。70 71   破烂的战旗,饱经岁月洗礼。带着万古的沉重与沧桑,哗的一声卷动,朝前方飞去,而后不断放大。72 73   到了最后。它抖动起来,原本暗淡的旗面,发出盖74     </div>75     <div id="scrollBar">76       <div id="tip"></div>77     </div>78   </div>79   <script>80     new ScrollBar('tip','scrollBar','section','article');81   </script>82 </body>83 </html>