首页 > 代码库 > js自定义的简易滚动条
js自定义的简易滚动条
<!doctype html><html><head><meta charset="utf-8"><title>原生JavaScript--简易滚动条--兼容各浏览器</title><style>* { padding:0; margin:0;}.cont_Ov { position:relative; top:100px; width:400px; border:2px solid #f00; margin:0 auto;}.scool { position:absolute; top:0; right:0; z-index:99; width:5px; background-color:#000;}.scool_An { position:absolute; top:0; right:0; z-index:999; width:5px; height:30px; background:url(un_bg_bar.gif) -33px 0px;}</style></head><body><div id="cont_Ov" class="cont_Ov"> <div style=" padding:20px; overflow:hidden;"> hahawefa1<br /> hahawefa2<br /> hahawefa3<br /> hahawefaae4<br /> hahawefa5<br /> hahawefa6<br /> hahawefa7<br /> hahawefaf8<br /> hahawefa9<br /> hahawefa10fa<br /> awfawef-11<br /> hahawefa-12<br /> hahawefagag-13<br /> hahawefa-14<br /> hahawefa-15<br /> hahawefa-16<br /> hahawefaaf-17<br /> hahawefa-18<br /> hahawefaff-19<br /> hahawefafffff-20<br /> hahawefa1-21<br /> hahawefa2-22<br /> hahawefa3-23<br /> hahawefaae-24<br /> hahawefa-25<br /> hahawefa-26<br /> hahawefa-27<br /> hahawefa-28<br /> hahawefa-29<br /> hahawefaf-30<br /> hahawefa-31<br /> hahawefafa-32<br /> awfawef-33<br /> hahawefa-34<br /> hahawefagag-35<br /> hahawefa-36<br /> hahawefa-37<br /> hahawefa-38<br /> hahawefaaf-39<br /> hahawefa-40<br /> hahawefaff-41<br /> hahawefafffff-42<br /> 1212121 </div></div><script>var get = { byId : function(id){ return typeof id === "string" ? document.getElementById(id) : id;},//获取ID的元素? sty : function(obj,name){ return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name];},//获取元素样式 obx_H : function(obj){ var obj = obj.getBoundingClientRect();//http://www.51res.net/html/2004/0408/10771.html获取元素位置 return obj.bottom - obj.top;}, ScoTop : function(){ return document.documentElement.scrollTop || document.body.scrollTop;}//滚动高度 };function enclose(con_Ov, con_Ov_H, con, con_H, scool,scool_H){//鼠标滚动事件绑定自定义方法wheelHandler var isFirefox = (navigator.userAgent.indexOf("Gecko") !== -1); if(document.onwheel !== undefined){ con_Ov.onwheel = wheelHandler; }else if(document.onmousewheel !== undefined){ con_Ov.onmousewheel = wheelHandler; }else if(isFirefox){ con_Ov.addEventListener("DOMMouseScroll", wheelHandler, false); } function wheelHandler(e){//滚动方法 var e = e || window.event, deltaY = e.wheelDeltaY || (e.wheelDeltaY===undefined && e.wheelDelta) || e.deltaY*-1 || e.detail*-1 || 0,//鼠标滚动事件判断滚动方向，deltaY = e.wheelDelta || e.deltaY*-1 || e.detail*-1这样同样效果不知道为什么写那么多呢 con_Top,// = parseFloat(get.sty(con,"top")), con_MaxH = con_H - con_Ov_H, //内容的最大滚动距离 scool_MaxH =con_Ov_H - scool_H,//左侧最大滚动距离 gd_Auto,//滚动设置的Interval对象 star_Time = 0, //滚动开始时间 now_Time = 0,//滚动结束时间 step = 10; //每次滚动多少像素 if(gd_Auto){clearInterval(gd_Auto);} star_Time = new Date().getTime(); if(deltaY < 0){//下滚 gd_Auto = setInterval(function(){ con_Top = parseFloat(get.sty(con,"top")), now_Time = new Date().getTime(); if(con_Top <= -con_MaxH){//滚到底了 clearInterval(gd_Auto); con.style.top = - con_MaxH + "px"; scool.style.top = scool_MaxH + "px"; return; } con.style.top = con_Top - step +"px"; scool.style.top = Math.round(-(con_Top-step)/con_MaxH*scool_MaxH) + "px"; if(con_Top - step <= -con_MaxH || now_Time - star_Time > 100){//前面是防止滚出最多高度，后面是防止一直滚动导致滚动延迟太大导致不流畅 clearInterval(gd_Auto); con_Top - step <= -con_MaxH && (con.style.top = - con_MaxH + "px",scool.style.top = scool_MaxH + "px"); //当滚动超出后让其回位,程序运行的几毫秒内超出的距离，效果不大 return; } },20) }else if(deltaY > 0){//上滚 gd_Auto = setInterval(function(){ con_Top = parseFloat(get.sty(con,"top")), now_Time = new Date().getTime(); if(con_Top >= 0){ clearInterval(gd_Auto); con.style.top = 0 + "px"; scool.style.top = 0 + "px"; return; } con.style.top = con_Top + step +"px"; scool.style.top = Math.round(-(con_Top+step)/con_MaxH*scool_MaxH) + "px"; if(con_Top + step >= 0 || now_Time - star_Time > 200){ clearInterval(gd_Auto); con_Top + step >= 0 && (con.style.top = 0 + "px",scool.style.top = 0 + "px"); return; } },20) }else{ alert("错误！"); } if(e.stopPropagation) e.stopPropagation(); //禁止冒泡 else e.cancelBubble = true; if(e.preventDefault) e.preventDefault(); else e.returnValue = false; }}function drag(con_Ov, con_Ov_H, con, con_H, ele, ele_H, e){//鼠标拉动事件 var e = e || window.event, scroll_T = get.ScoTop(),//当前浏览器滚动高度 sc_H = con_Ov_H - ele_H,//内容的可视高度减去滚动条按钮的高度（即滚动条的可以滚动的高度） startY = e.clientY + scroll_T,//滚动条按钮在网页中的Y轴位置 origY = ele.offsetTop,//滚动条按钮的TOP deltaY = startY - origY;//鼠标点击位置在滚动条按钮的Y轴位置 if(document.addEventListener){ document.addEventListener("mousemove", moveHandler, true); document.addEventListener("mouseup", upHandler, true); }else if(document.attachEvent){ // IE Event Model for IE5-8 ele.setCapture();//鼠标捕获(setCapture)作用是将鼠标事件捕获到当前文档的指定的对象。可以让点击其他地方时这个元素也像被点击一样。这个对象会为当前应用程序或整个系统接收所有鼠标事件。 ele.attachEvent("onmousemove", moveHandler); ele.attachEvent("onmouseup", upHandler); ele.attachEvent("onlosecapture", upHandler);//当元素失去鼠标移动所形成的选择焦点时触发的事件 } if(e.stopPropagation) e.stopPropagation(); //禁止冒泡 else e.cancelBubble = true; if(e.preventDefault) e.preventDefault();//阻止默认事件 else e.returnValue = false; function moveHandler(e) {//鼠标拖动滚动条的方法 var e = e || window.event, ele_Top = Math.max(e.clientY + scroll_T - deltaY,0) && Math.min(e.clientY + scroll_T - deltaY,sc_H),//不就是滚动条按钮的TOP嘛和origY一样啊 con_Top = -ele_Top/sc_H*(con_H - con_Ov_H); //内容滚动TOP，负负得正哦 ele.style.top = ele_Top + "px"; con.style.top = con_Top + "px"; if(e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } function upHandler(e){//鼠标弹起不拖动时的方法 var e = e || window.event; if(document.removeEventListener){ document.removeEventListener("mouseup", upHandler, true); document.removeEventListener("mousemove", moveHandler, true); }else if(document.detachEvent){ ele.detachEvent("onlosecapture", upHandler); ele.detachEvent("onmouseup", upHandler); ele.detachEvent("onmousemove", moveHandler); ele.releaseCapture(); } if(e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; }}function jsScroll(idName,height,clName01,clName02){ var con_Ov = get.byId(idName), con_Ov_Height = parseFloat(get.sty(con_Ov,"height")), cont = con_Ov.getElementsByTagName("div")[0], cont_H = Math.round(get.obx_H(cont)); if(!con_Ov_Height || con_Ov_Height == "auto" || con_Ov_Height>=height){//如果样式设置不对给重置 con_Ov.style.height = height+"px"; con_Ov.style.overflow = "hidden"; con_Ov_Height = height; } if(cont_H<=con_Ov_Height) return;//如果没超出就不加滚动条了//如果没超出就不加滚动条了,如果是隐藏的元素那么cont_H会一直等于0，要在弹窗显示后才触发,要限制第一次点击弹出才添加元素 cont.style.position = "relative";//设置内容必要CSS样式； cont.style.top = "0px"; cont.style.zIndex = "0"; var scool = document.createElement("div"),scool_An = document.createElement("div");//添加滚动条 if(clName01){ scool.className = clName01; }else{ scool.style.cssText = "position:absolute; top:0; right:0; z-index:99; width:10px; background-color:#ccc;"; } scool.style.height = con_Ov_Height + "px"; con_Ov.appendChild(scool); if(clName02){ scool_An.className = clName02; }else{ scool_An.style.cssText = "position:absolute; top:0; right:0; z-index:999; width:10px; height:30px; background-color:#999;"; } con_Ov.appendChild(scool_An); var scool_AnH = parseFloat(get.sty(scool_An,"height")); scool_An.onmousedown = function(e){ drag(con_Ov,con_Ov_Height,cont,cont_H,this,scool_AnH,e);//鼠标按下执行 } enclose(con_Ov,con_Ov_Height,cont,cont_H,scool_An,scool_AnH);//鼠标没按下执行}jsScroll("cont_Ov",200,"scool","scool_An"); //如果元素是隐藏的就在元素显示后调用，而且只能调用一次</script></body></html>
js自定义的简易滚动条
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。