Javascript学习------js模拟滚动条
js模拟滚动条
1 <!DOCTYPE html> 2 <html> 3 <head> 4 5 <title></title> 6 <style type="text/css"> 7 * { margin: 0px; padding: 0px; } 8 .scroll-boxall { width: 312px; height: 500px; overflow: hidden; zoom: 1; border: 1px solid #ddd; position: absolute; left: 50%; margin-left: -156px; margin-top: 100px; } 9 .scroll-boxall2 { width: 312px; height: 500px; overflow: hidden; zoom: 1; border: 1px solid #ddd; position: absolute; left: 50%; margin-left: -156px; margin-top: 700px; } 10 .s-box { width: 312px; height: 500px; overflow: hidden; position: relative; zoom: 1; } 11 .s-box .s-c { width: 300px; position: absolute; left: 0px; top: 0px; background: #ddd; } 12 .s-box .s-s { width: 8px; height: 500px; position: absolute; top: 0px; right: 2px; } 13 .s-s .s { width: 8px; height: 100px; overflow: hidden; position: absolute; top: 0px; left: 0px; border-radius: 5px; background: #ddd; cursor: pointer; display: inline-block; } 14 .box { border: 1px solid #ff6a00; padding: 20px 0px; text-align: center; font-size: 25px; margin-top: 10px; } 15 </style> 16 </head> 17 <body> 18 <div class="scroll-boxall"> 19 <div class="s-box" id="s-box"> 20 <div class="s-c" id="s-c"> 21 <div class="box">1</div> 22 <div class="box">2</div> 23 <div class="box">3</div> 24 <div class="box">4</div> 25 <div class="box">5</div> 26 <div class="box">6</div> 27 <div class="box">7</div> 28 <div class="box">8</div> 29 <div class="box">9</div> 30 <div class="box">10</div> 31 </div> 32 <div class="s-s" id="s-s"> 33 <span class="s" id="s"></span> 34 </div> 35 </div> 36 </div> 37 <script type="text/javascript"> 38 !function () { 39 function getid(id) { 40 return document.getElementById(id); 41 } 42 //事件传递 43 //object参数，fun方法 44 var BindAsEventListener = function (object, fun) { 45 return function (event) { 46 return fun.call(object, (event || window.event)); 47 } 48 } 49 50 ///模拟滚动条 51 function scrcoll(a, b, f, g, c, d, e) { 52 this.a = a;//包裹层; 53 this.b = b;//内容层; 54 this.f = f;//滚动条; 55 this.g = g;//滚动条容器; 56 this.c = c;//包裹高度; 57 this.d = d;//内容高度; 58 this.e = e;//滑动比例; 59 this.s = 0;//滚动条位置; 60 this.u = 0;//内容位置; 61 this.p = 0;//光标在滚动条相对位置; 62 this.clearselect = window.getSelection ? function () { window.getSelection().removeAllRanges(); } : function () { document.selection.empty(); };//清空用户文体选中 63 } 64 //注册滚动条滑轮事件 65 scrcoll.prototype.regfn = function (e) { 66 var ts = this, ratio = 0; 67 if (ts.d > ts.c) ratio = ts.c / (ts.d / ts.c);//计算出滚动条高度 68 ts.g.style.height = ratio + "px";//修改滚动打高度 69 if (ts.a.addEventListener) { 70 ts.a.addEventListener("DOMMouseScroll", BindAsEventListener(ts, ts.fn), false);//火狐 71 ts.a.addEventListener("mousewheel", BindAsEventListener(ts, ts.fn), false);//ie9以上版本处理 72 ts.g.addEventListener("mousedown", BindAsEventListener(ts, ts.scrcollmove), false);//ie9以上版本处理 73 } 74 else if (ts.a.attachEvent) { 75 ts.a.attachEvent('onmousewheel', BindAsEventListener(ts, ts.fn)); 76 ts.g.attachEvent('onmousedown', BindAsEventListener(ts, ts.scrcollmove)); 77 } 78 else { 79 ts.a["onmousewheel"] = BindAsEventListener(ts, ts.fn); 80 ts.g["onmousedown"] = BindAsEventListener(ts, ts.scrcollmove); 81 } 82 } 83 84 //滑轮事件处理 85 scrcoll.prototype.fn = function (e) { 86 e = e || window.event; 87 var ts = this; 88 var act = e.wheelDelta ? e.wheelDelta / 120 : (0 - e.detail / 3);;//向上滚动为正数，向下滚动为负数; 89 ts.fnscroll(act); 90 //取消系统滚动条事件 91 if (e.preventDefault) e.preventDefault(); 92 e.returnValue = false; 93 } 94 ///计算条高度 95 scrcoll.prototype.fnscroll = function (de) { 96 var ts = this; 97 var blh = this.g.offsetHeight / this.e;//获得每次滚动条的移动距离 98 var alh = this.a.offsetHeight / this.e;//获得每次滚动条的移动距离 99 if (de > 0) {//向上滚动 100 ts.s -= blh; 101 ts.u += alh; 102 } 103 else {//向下滚动 104 ts.s += blh; 105 ts.u -= alh; 106 } 107 if (ts.s <= 0) {//上边界 108 ts.s = ts.s <= 0 ? 0 : ts.s; 109 ts.u = ts.u >= 0 ? 0 : ts.u; 110 } 111 var a = this.a.offsetHeight - this.g.offsetHeight; 112 var b = this.b.offsetHeight - this.a.offsetHeight; 113 if (ts.s >= a) {//下边界 114 ts.s = ts.s >= a ? a : ts.s; 115 ts.u = ts.u <= -b ? -b : ts.u; 116 } 117 ts.g.style.top = ts.s + "px"; 118 ts.b.style.top = ts.u + "px"; 119 } 120 //拖拽 121 scrcoll.prototype.scrcollmove = function (e) { 122 e = e || window.event; 123 var ts = this; 124 ts.g.style.backgroundColor = "#888"; 125 ts.p = e.clientY;//获得鼠标的相对位置 126 var a = ts.g.offsetTop;//滚动条可向上移动的距离 127 var b = ts.f.offsetHeight - ts.g.offsetTop - ts.g.offsetHeight;//滚动条可向下移动的距离 128 var c = ts.s, d = ts.u;//临时变量滚动条位置 129 document.onmousemove = function (ev) { 130 var oEvent = ev || window.event; 131 var o = oEvent.clientY - ts.p;//获得光标偏移量 132 if (o < (0 - a)) o = 0 - a;//可移动上界限 133 if (o > b) o = b;//可移动下界限 134 ts.s = c + o;//存储滚动条位置 135 ts.u = d - ts.d * (o / ts.c);//存储内容位置 136 ts.g.style.top = ts.s + "px"; 137 ts.b.style.top = ts.u + "px"; 138 ts.clearselect(); 139 } 140 document.onmouseup = function () { 141 ts.g.style.backgroundColor = "#ddd"; 142 document.onmousemove = null; 143 document.onmouseup = null; 144 } 145 return false; 146 } 147 148 //实例化 149 var dom1 = getid("s-box"), dom2 = getid("s-c"), dom3 = getid("s-s"), dom4 = getid("s"); 150 var scrcoll1 = new scrcoll(dom1, dom2, dom3, dom4, 500, dom2.offsetHeight, 10); 151 scrcoll1.regfn(); 152 }(); 153 </script> 154 </body> 155 </html>
