<!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";//主题内容滚动每次10个像素，鼠标滚轮一次滚动触发好几次滚轮事件 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 clickScroll(con,con_H,con_Ov_H,ele,ele_H,scool,e,kk,h){//点击滚动条非滚动按钮方法 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 sool_T=kk+scroll_T,//滚动条距离页面顶部高度 //deltaY = startY - origY;//鼠标点击位置在滚动条按钮的Y轴位置 move_T=startY-sool_T;//鼠标点击在滚动条中的位置 //alert(h); if(move_T>h){move_T=h}; scool.style.top = move_T + "px"; con.style.top = Math.round(-move_T/sc_H*(con_H - con_Ov_H)) + "px"; }//赶着吃饭，下次再完善 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; 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; 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);//鼠标没按下执行 scool.onclick = function(e){//点击滚动条非滚动按钮执行 var kk=scool.getBoundingClientRect().top,//滚动条相对页面的TOP h=scool.getBoundingClientRect().bottom-scool.getBoundingClientRect().top-scool_An.getBoundingClientRect().bottom+scool_An.getBoundingClientRect().top;//滚动条减去滚动条按钮的高度 clickScroll(cont,cont_H,con_Ov_Height,this,scool_AnH,scool_An,e,kk,h); } } jsScroll("cont_Ov",200,"scool","scool_An"); //如果元素是隐藏的就在元素显示后调用，而且只能调用一次 </script> </body> </html>