jQuery，自定义滚动条
目的：用js模拟实现滚动条，从而达到设计图以及产品要求的效果……
原理：伴随着父级容器overflow，控制绝对容器的left,top值，从而达到效果。
在线代码地址：http://runjs.cn/code/agzuqcdh
在线测试地址：http://sandbox.runjs.cn/show/agzuqcdh
html代码
1 <div id="show"> 2 <!--内容区域--> 3 <div id="container"> 4 <p>1326546478797897987</p> 5 <p>1326546478797897987</p> 6 <p>1326546478797897987</p> 7 <p>1326546478797897987</p> 8 <p>1326546478797897987</p> 9 <p>1326546478797897987</p> 10 <p>1326546478797897987</p> 11 <p>1326546478797897987</p> 12 <p>1326546478797897987</p> 13 <p>1326546478797897987</p> 14 <p>1326546478797897987</p> 15 <p>1326546478797897987</p> 16 <p>1326546478797897987</p> 17 <p>1326546478797897987</p> 18 <p>1326546478797897987</p> 19 <p>1326546478797897987</p> 20 </div> 21 22 <!--滚动条区域--> 23 <div id="sctollCon"> 24 <div id="sctollDo"></div> 25 </div> 26 </div>
js代码：
ScorllTop({ "show":$("#show"),//可视区域 "container":$("#container"),//内容区域 "scroll":$("#sctollCon"),//滚动条区域 "scrollDo":$("#sctollDo")//滚动条 }); //竖向的滚动条，四个参数,jQuery对象， // { // "show":,//可视区域 // "container":,//内容区域 // "scroll":,//滚动条区域 // "scrollDo"://滚动条 // } function ScorllTop($obj){ var $container = $obj.show,//可视区域 $contanr = $obj.container,//内容区域 $conScroll = $obj.scroll,//滚动条活动区域 $sroll = $obj.scrollDo,//滚动条 startY = 0,//开始位置 lastY = 0,//结束位置 YN = false, bBtn = true;//判断滚动条上滚还是下滚 $container.mouseover(function(){ if ( $contanr.height() > $container.height() ) { $conScroll.show(); //初始化滚动条的高度 $sroll.height($container.height()*$conScroll.height()/$contanr.height()); //添加拖动事件 addEvent($sroll[0],'mousedown',mouseDown); //添加滚动条事件 addEvent($contanr[0],'DOMMouseScroll',mouseMove); addEvent($conScroll[0],'DOMMouseScroll',mouseMove); $contanr[0].onmousewheel = MouseScr; $conScroll[0].onmousewheel = MouseScr; }else{ $contanr.css({'top':0}); $sroll.css({'top':0}); } }); $container.mouseout(function(){ $conScroll.hide(); }); function mouseDown(e){ startY = e.clientY - this.offsetTop; this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象 console.log(startY); addEvent(document,'mousemove',mouseMove); addEvent(document,'mouseup',mouseUp); return false; } function mouseMove(e){ var maxVal = $conScroll.height() - $sroll.height();//最大值 this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象 lastY = e.clientY - startY; lastY = lastY < 0 ? 0 :lastY; lastY = lastY > maxVal ? maxVal : lastY; $sroll.css({'top':lastY+'px'}); $contanr.css({'top':-$conScroll.height()*lastY/$sroll.height()}); return false; } function mouseUp(){ console.log('取消事件'); removeEvent(document,'mousemove',mouseMove); removeEvent(document,'mouseup',mouseUp); return false; } function MouseScr(ev){ var ev = ev || window.event, TopY = 0; if(ev.detail){ bBtn = ev.detail>0 ? true : false; } else{ bBtn = ev.wheelDelta<0 ? true : false; } if(bBtn){ //下 TopY = $contanr.position().top-10; } else{ //上 TopY = $contanr.position().top+10; } var maxTop = $contanr.outerHeight()-$container.outerHeight(); TopY = TopY > 0 ? 0 : TopY; TopY = TopY < -maxTop ? -maxTop : TopY; $contanr.css({'top':TopY+'px'}); $sroll.css({'top':$sroll.height()*Math.abs(TopY)/$conScroll.height()+'px'}); if(ev.preventDefault){ ev.preventDefault(); } else{ return false; } } } //ScorllTop end! //拖拽活动层,拖拽的区域,活动的区域，最大活动区域，默认是window function dragConFun(obj){ var $dragDo = obj.dragObj,//拖拽触发点 $dragCon = obj.activeObj,//拖拽的大容器 $dragMax = obj.maxCon || $(window),//最大的容器,默认是window //拖拽容器的大小 dragWidth = $dragCon.outerWidth(),//拖拽容器的 dragHeight = $dragCon.outerHeight(), //最大活动范围 maxWidth = $dragMax.width() - dragWidth, maxHeight = $dragMax.height() - dragHeight, //操作变量 startX = 0, startY = 0, a; addEvent($dragDo[0],'mousedown',mouseDoun); function mouseDoun(e){ startX = e.clientX - $dragCon[0].offsetLeft; startY = e.clientY - $dragCon[0].offsetTop; this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象 $("body").css({ 'cursor':"move" }); addEvent(document,'mousemove',mouseMove); addEvent(document,'mouseup',mouseUp); return false; }; function mouseMove(e){ var endX = 0, endY = 0; endX = e.clientX - startX; endY = e.clientY - startY; endX = endX < 0 ? 0 : endX; endX = endX > maxWidth ? maxWidth : endX; endY = endY < 0 ? 0 : endY; endY = endY > maxHeight ? maxHeight : endY; $dragCon.css({ 'left':endX, 'top':endY }); return false; }; function mouseUp(){ $("body").css({ 'cursor':"auto" }); removeEvent(document,'mousemove',mouseMove); removeEvent(document,'mouseup',mouseUp); return false; }; if (obj.clickother) { //非目标区域，隐藏 $(document).mouseup(function(e){ var _con = $dragCon; // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 $dragCon.hide(); } }); }; }//dragConFun end! //添加监听事件 function addEvent( obj, type, fn ) { if ( obj.attachEvent ) { obj['e'+type+fn] = fn; obj[type+fn] = function(){obj['e'+type+fn]( window.event );} obj.attachEvent( 'on'+type, obj[type+fn] ); } else{ obj.addEventListener( type, fn, false ); } } //移除监听事件 function removeEvent( obj, type, fn ) { if ( obj.detachEvent ) { obj.detachEvent( 'on'+type, obj[type+fn] ); obj[type+fn] = null; } else { obj.removeEventListener( type, fn, false ); } }
