你的位置:首页 > 软件开发 > 网页设计 > js原生封装自定义滚动条

js原生封装自定义滚动条

发布时间:2015-11-21 01:00:25
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:1 ...
 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 }();

原标题:js原生封装自定义滚动条

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。