下面图老师小编要向大家介绍下层滚动条,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!
【 tulaoshi.com - Web开发 】
html headtitle层滚动条DIY - Powered by yexj00/title style !-- *{ font-size: 12px} -- /style script language="Javascript" !-- function $(obj){ return document.all[obj]; } function setbarHeight(){ $("scroll_bar").style.height=($("scroll_content").clientHeight)/($("scroll_content").scrollHeight)*($("scroll_area").offsetHeight)+"px"; if($("scroll_bar").offsetHeight=$("scroll_area").offsetHeight){ $("scroll_bar").style.display='none'; } } //-- /script script language="Javascript" !-- var drag=false; //是否允许拖动 var mx,my; var scrollbar_L; var scrollbar_T; var scrollbar_W; var scrollbar_H; var scrollarea_T,scrollarea_H; var startT,startY; function getInfor(){ mx=event.clientX+document.documentElement.scrollLeft; my=event.clientY+document.documentElement.scrollTop; scrollbar_L=document.documentElement.clientLeft+$("outerDiv").style.pixelLeft+$("scroll_area").offsetLeft+$("scroll_bar").offsetLeft; scrollbar_T=document.documentElement.clientTop+$("outerDiv").style.pixelTop+$("scroll_area").offsetTop+$("scroll_bar").offsetTop; scrollbar_W=$("scroll_bar").offsetWidth; scrollbar_H=$("scroll_bar").offsetHeight; scrollarea_T=document.documentElement.clientTop+$("outerDiv").style.pixelTop+$("scroll_area").offsetTop; scrollarea_H=$("scroll_area").offsetHeight; } function dragit(){ getInfor(); if(event.srcElement.id=="scroll_bar"){ drag=true; $("scroll_bar").style.background="#cccccc"; startT=$("scroll_bar").style.pixelTop; startY=event.clientY; document.onmousemove=move;} } function move(){ if(drag==true){ $("scroll_bar").style.pixelTop=startT+event.clientY-startY; $("scroll_content").scrollTop=$("scroll_bar").style.pixelTop/$("scroll_area").offsetHeight*$("scroll_content").scrollHeight; if($("scroll_bar").style.pixelTop=0){ $("scroll_bar").style.pixelTop=0} if($("scroll_bar").style.pixelTop=(scrollarea_H-scrollbar_H)){ $("scroll_bar").style.pixelTop=scrollarea_H-scrollbar_H; } return false;} } document.onmousedown=dragit; document.onmouseup=new Function("drag=false;$('scroll_bar').style.background='#efefef'"); //-- /script /head body onload="setbarHeight()" div div !-- 这是层的内容区 -- script language="Javascript" !-- var str="这个是用层做的滚动条!"; str=str.split(""); for(i=0;istr.length;i++){ document.write(str[i]+"br /"); } //-- /script !-- 层的内容区结束 -- /div div/div div div/div /div div/div /div /body /html 提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。
来源:http://www.tulaoshi.com/n/20160219/1604854.html
看过《层滚动条》的人还看了以下文章 更多>>
经验教程
收藏
最简单的方法去掉iframe滚动条
三好青年人
从滚动条消失看细节设计技巧
我可能不会爱上
为CListBox加上智能水平滚动条
csdnsa_jfmw