资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
CSS/HTML教程
>>>
css层滚动条
<html> <head><title>层滚动条DIY - Powered by yexj00</title> <style> <!-- *{ font-size: 12px} --> </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22Javascript%22%3E%20%0D%0A%3C!--%20%0D%0A%20function%20%24(obj)%7B%20%0D%0Areturn%20document.all%5Bobj%5D%3B%20%0D%0A%20%7D%20%0D%0A%20function%20setbarHeight()%7B%20%20%0D%0A%24(%22scroll_bar%22).style.height%3D(%24(%22scroll_content%22).clientHeight)%2F(%24(%22scroll_content%22).scrollHeight)*(%24(%22scroll_area%22).offsetHeight)%2B%22px%22%3B%20%0D%0Aif(%24(%22scroll_bar%22).offsetHeight%3E%3D%24(%22scroll_area%22).offsetHeight)%7B%20%0D%0A%24(%22scroll_bar%22).style.display%3D'none'%3B%20%0D%0A%20%20%7D%20%0D%0A%20%7D%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22Javascript%22%3E%20%0D%0A%3C!--%20%0D%0Avar%20drag%3Dfalse%3B%20%2F%2F%E6%98%AF%E5%90%A6%E5%85%81%E8%AE%B8%E6%8B%96%E5%8A%A8%20%0D%0Avar%20mx%2Cmy%3B%20%0D%0Avar%20scrollbar_L%3B%20%0D%0Avar%20scrollbar_T%3B%20%0D%0Avar%20scrollbar_W%3B%20%0D%0Avar%20scrollbar_H%3B%20%0D%0Avar%20scrollarea_T%2Cscrollarea_H%3B%20%0D%0Avar%20startT%2CstartY%3B%20%0D%0A%0D%0Afunction%20getInfor()%7B%20%0D%0Amx%3Devent.clientX%2Bdocument.documentElement.scrollLeft%3B%20%0D%0Amy%3Devent.clientY%2Bdocument.documentElement.scrollTop%3B%20%20%0D%0Ascrollbar_L%3Ddocument.documentElement.clientLeft%2B%24(%22outerDiv%22).style.pixelLeft%2B%24(%22scroll_area%22).offsetLeft%2B%24(%22scroll_bar%22).offsetLeft%3B%20%0D%0Ascrollbar_T%3Ddocument.documentElement.clientTop%2B%24(%22outerDiv%22).style.pixelTop%2B%24(%22scroll_area%22).offsetTop%2B%24(%22scroll_bar%22).offsetTop%3B%20%0D%0Ascrollbar_W%3D%24(%22scroll_bar%22).offsetWidth%3B%20%0D%0Ascrollbar_H%3D%24(%22scroll_bar%22).offsetHeight%3B%20%0D%0Ascrollarea_T%3Ddocument.documentElement.clientTop%2B%24(%22outerDiv%22).style.pixelTop%2B%24(%22scroll_area%22).offsetTop%3B%20%0D%0Ascrollarea_H%3D%24(%22scroll_area%22).offsetHeight%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20dragit()%7B%20%0D%0AgetInfor()%3B%20%0D%0A%0D%0Aif(event.srcElement.id%3D%3D%22scroll_bar%22)%7B%20%0D%0A%20%20drag%3Dtrue%3B%20%0D%0A%20%20%24(%22scroll_bar%22).style.background%3D%22%23cccccc%22%3B%20%0D%0A%20%20startT%3D%24(%22scroll_bar%22).style.pixelTop%3B%20%0D%0A%20%20startY%3Devent.clientY%3B%20%0D%0A%20document.onmousemove%3Dmove%3B%20%0D%0A%20%20%20%7D%20%0D%0A%20%7D%20%0D%0Afunction%20move()%7B%20%0D%0Aif(drag%3D%3Dtrue)%7B%20%0D%0A%24(%22scroll_bar%22).style.pixelTop%3DstartT%2Bevent.clientY-startY%3B%20%0D%0A%24(%22scroll_content%22).scrollTop%3D%24(%22scroll_bar%22).style.pixelTop%2F%24(%22scroll_area%22).offsetHeight*%24(%22scroll_content%22).scrollHeight%3B%20%0D%0Aif(%24(%22scroll_bar%22).style.pixelTop%3C%3D0)%7B%20%24(%22scroll_bar%22).style.pixelTop%3D0%7D%20%0D%0Aif(%24(%22scroll_bar%22).style.pixelTop%3E%3D(scrollarea_H-scrollbar_H))%7B%20%20%0D%0A%0D%0A%24(%22scroll_bar%22).style.pixelTop%3Dscrollarea_H-scrollbar_H%3B%20%0D%0A%20%7D%20%0D%0Areturn%20false%3B%20%0D%0A%20%20%20%7D%20%0D%0A%0D%0A%20%7D%20%0D%0A%0D%0Adocument.onmousedown%3Ddragit%3B%20%0D%0Adocument.onmouseup%3Dnew%20Function(%22drag%3Dfalse%3B%24('scroll_bar').style.background%3D'%23efefef'%22)%3B%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> </head> <body onload="setbarHeight()"> <div id="outerDiv" style="position:absolute; left:100px; top:50px; width:130px; height:130px"> <div id="scroll_content" style="position:absolute; padding:2px; left:2px; top:5px; width:100px; height:100px; border:1px solid #cccccc; overflow: hidden"> <!-- 这是层的内容区 --> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22Javascript%22%3E%20%0D%0A%3C!--%20%0D%0Avar%20str%3D%22%E8%BF%99%E4%B8%AA%E6%98%AF%E7%94%A8%E5%B1%82%E5%81%9A%E7%9A%84%E6%BB%9A%E5%8A%A8%E6%9D%A1%2CPowered%20by%20yexj00!%22%3B%20%0D%0Astr%3Dstr.split(%22%22)%3B%20%0D%0Afor(i%3D0%3Bi%3Cstr.length%3Bi%2B%2B)%7B%20%0D%0Adocument.write(str%5Bi%5D%2B%22%20%3Cbr%3E%22)%3B%20%0D%0A%20%7D%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> <!-- 层的内容区结束 --> </div> <div id="up_btt" style="position:absolute; left:104px; top:5px; width:8px; height:16px; background:#efefef; font-size:0px;border:1px outset #cccccc"></div> <div id="scroll_area" style=" position:absolute; left:104px; top:22px; width:8px; height:66px;font-size:0px; background:#efefef"> <div id="scroll_bar" style="position:absolute; left:0px; top:0px; width:8px; background:#efefef; font-size:0px;border:1px outset #cccccc"></div> </div> <div id="down_btt" style="position:absolute; left:104px; top:89px; width:8px; height:16px; background:#efefef;font-size:0px; border:1px outset #cccccc"></div> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程