Js native encapsulation of custom scroll bars, js encapsulation of scroll bars

Js native encapsulation of custom scroll bars, js encapsulation of scroll bars

1/* 2 * @ Author: dothin frontend 3 * @ Date: 00:12:15 4 * @ Last Modified by: dothin frontend 5 * @ Last Modified time: 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.tar get | 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: the variable-length button on the scroll bar 56 // scrollBar: scroll bar 57 // section: content parent level 58 // article: Content 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 // Add a rolling event 71 EventUtil to the element that requires a rolling event. addHandler (this. oSection, 'mousewheel ', function (ev) {72 _ this. onMouseWheel (ev); 73}); // ie, chrome 74 EventUtil. addHandler (this. oSection, 'domainscroll ', 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, 'domainscroll', function (ev) {81 _ this. onMouseWheel (ev); 82}); // ff 83}; 84 // initialize the scroll bar. if the content is insufficient, hide the scroll bar. The length of the scroll bar is determined by the length of the content. 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 // The Row height, font size, font type, and inconsistency of Each browser. to initialize consistent scroll bars, the style must be unified 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 }();

Call instance:

1 <! DOCTYPE html> 2