div模拟滚动条
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>scrolling</title> 6 </head> 7 <style> 8 *{ margin: 0; padding: 0;} 9 p{ line-height: 50px;} 10 p:nth-child(2n){ background: #ffeaea;} 11 p:nth-child(2n+1){ background: #cceaea;} 12 13 .box{ margin-top:100px; position: relative; width:400px; height:200px; border: 1px solid #000; overflow: hidden;} 14 .scroll-content{ position: absolute; left: 0; top: 0; width: 100%;} 15 16 .scroll-bg{ display: none; width: 7px; height: 100%; border-left: 1px solid #e1e1e1; border-right: none; border-top: none; border-bottom: none; background-color: #f2f2f2; position: absolute; _zoom: 1; top: 0; right: 0; cursor: pointer;} 17 .scroll-bg:hover{ border-color:#bfbfbf; background-color:#a1a1a1} 18 .scroll-bar{z-index: 20; position: absolute; width: 7px; height: 15px; background-color: #f00; overflow: hidden;left: 0px; cursor: pointer;} 19 </style> 20 <body> 21 22 <div class="box" id="box"> 23 <div class="scroll-content"> 24 <p>1</p> 25 <p>2</p> 26 <p>3</p> 27 </div> 28 <div class="scroll-bg"> 29 <div class="scroll-bar"></div> 30 </div> 31 </div> 32 33 34 <div class="box" id="box1"> 35 <div class="scroll-content"> 36 <p>1</p> 37 <p>2</p> 38 <p>3</p> 39 <p>4</p> 40 <p>5</p> 41 <p>6</p> 42 <p>7</p> 43 <p>8</p> 44 <p>9</p> 45 <p>10</p> 46 </div> 47 <div class="scroll-bg"> 48 <div class="scroll-bar"></div> 49 </div> 50 </div> 51 52 <div class="box" id="box2" style="height: 300px;"> 53 <div class="scroll-content"> 54 <p>1</p> 55 <p>2</p> 56 <p>3</p> 57 <p>4</p> 58 <p>5</p> 59 <p>6</p> 60 <p>7</p> 61 <p>8</p> 62 <p>9</p> 63 <p>10</p> 64 </div> 65 <div class="scroll-bg"> 66 <div class="scroll-bar"></div> 67 </div> 68 </div> 69 70 <script src="jquery-1.8.3.min.js"></script> 71 <script> 72 //jquery mousewheel插件 73 (function ($) { 74 var types = ['DOMMouseScroll', 'mousewheel']; 75 $.event.special.mousewheel = { 76 setup: function () { 77 if (this.addEventListener) { 78 for (var i = types.length; i;) { 79 this.addEventListener(types[--i], handler, false); 80 } 81 } else { 82 this.onmousewheel = handler; 83 } 84 }, 85 teardown: function () { 86 if (this.removeEventListener) { 87 for (var i = types.length; i;) { 88 this.removeEventListener(types[--i], handler, false); 89 } 90 } else { 91 this.onmousewheel = null; 92 } 93 } 94 }; 95 $.fn.extend({ 96 mousewheel: function (fn) { 97 return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel"); 98 }, 99 unmousewheel: function (fn) { 100 return this.unbind("mousewheel", fn); 101 } 102 }); 103 function handler(event) { 104 var orgEvent = event || window.event, args = [].slice.call(arguments, 1), delta = 0, returnValue = true, deltaX = 0, deltaY = 0; 105 event = $.event.fix(orgEvent); 106 event.type = "mousewheel"; 107 // Old school scrollwheel delta 108 if (event.originalEvent.wheelDelta) { delta = event.originalEvent.wheelDelta / 120; } 109 if (event.originalEvent.detail) { delta = -event.originalEvent.detail / 3; } 110 // New school multidimensional scroll (touchpads) deltas 111 deltaY = delta; 112 // Gecko 113 if (orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS) { 114 deltaY = 0; 115 deltaX = -1 * delta; 116 } 117 // Webkit 118 if (orgEvent.wheelDeltaY !== undefined) { deltaY = orgEvent.wheelDeltaY / 120; } 119 if (orgEvent.wheelDeltaX !== undefined) { deltaX = -1 * orgEvent.wheelDeltaX / 120; } 120 // Add event and delta to the front of the arguments 121 args.unshift(event, delta, deltaX, deltaY); 122 return $.event.handle.apply(this, args); 123 } 124 })(jQuery); 125 126 127 128 129 //自己封装一个scrolling插件 130 (function($){ 131 $.scrolling = function(obj){ 132 var $scrollContent = obj.find(".scroll-content"), 133 $scrollBg = obj.find(".scroll-bg"), 134 $scrollBar = obj.find(".scroll-bar"), 135 clientH = obj.height(), //可见区域高度 136 winH = $scrollContent.height(), //滚动区域高度 137 atH = Math.floor(clientH * .75), //每次滚动为可见区域3/4 138 num = Math.ceil(winH/atH)-1, ///可以滚动的次数 139 pos = 0, //当前区域值 140 barH = Math.floor(clientH/num), ///bar高度 141 barAtH = Math.floor((clientH-barH)/(num-1)), ///滚动条每次滚动高度 142 143 maxH = clientH - barAtH, //滚动条y最大值 144 barContentH = (winH-clientH)/maxH; ///滚动条对应右侧滚动长度 145 146 $scrollBar.height(barH);//设置滚动条高度 147 148 //判断是否显示滚动条 149 if(winH <= clientH){ 150 return false; 151 }else{ 152 $scrollBg.show(); 153 } 154 155 //鼠标滚轮 156 obj.bind('mousewheel', function(e,deta) { 157 if(deta < 0){ //向上滚动 158 if(pos>num-2)return false; 159 pos++; 160 }else{ //向上滚动 161 if(pos<1)return false; 162 pos--; 163 } 164 165 $scrollContent.stop(true,false).animate({"top":-pos*atH}, 300); 166 $scrollBar.stop(true,false).animate({"top":pos*barAtH}, 300); 167 168 return false; 169 }); 170 171 //滚动条、内容区域滚动 172 var changeScroll = function (y){ 173 $scrollBar.css({'top':y+"px"}); 174 $scrollContent.css({'top':-y*barContentH+"px"},100); 175 } 176 177 //滚动条拖拽 178 obj.find(".scroll-bar").mousedown(function(e){ 179 var position = $(this).position(); 180 var y = e.pageY - position.top; 181 182 $(document).bind("mousemove",function(ev){ 183 $(this).bind('selectstart',function(){return false;}); 184 var _y = ev.pageY - y; 185 if(_y <= 0 || _y >= maxH)return false; 186 console.log(_y) 187 changeScroll(_y) 188 }); 189 190 }); 191 192 $(document).mouseup(function(){ 193 $(this).unbind("mousemove"); 194 }); 195 196 //阻止点击父级往上冒泡 197 $scrollBar.click(function (){ 198 return false; 199 }) 200 201 //点击滚动条父级 202 $scrollBg.click(function (e){ 203 var y = (e.pageY-$(this).offset().top-barH/2); 204 if(y < 0){ 205 y = 0; 206 }else if(y > maxH){ 207 y = maxH; 208 } 209 changeScroll(y) 210 }) 211 212 }; 213 })(jQuery) 214 215 //调用 216 $.scrolling($("#box")) 217 $.scrolling($("#box1")) 218 $.scrolling($("#box2")) 219 </script> 220 </body> 221 </html>
p.s:简易版本还需要完善（1.滚动条往下滚动整除有余数，滚到最后没有处理，2.鼠标滚轮最后一屏下面可能有旁白没有处理）
预览: 查看
附件: 下载
