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