首页 / CSS / css层滚动条_经验交流
css层滚动条_经验交流
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css层滚动条_经验交流，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3384字，纯文字阅读大概需要5分钟。
内容图文
css层滚动条_经验交流<html>
<head><title>层滚动条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 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">
<!-- 这是层的内容区 -->
<script language="Javascript">
<!--
var str="这个是用层做的滚动条,Powered by yexj00!";
str=str.split("");
for(i=0;i<str.length;i++){
document.write(str[i]+" <br>");
}
//-->
</script>
<!-- 层的内容区结束 -->
</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>以上就是css层滚动条_经验交流的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！
内容总结
以上是互联网集市为您收集整理的css层滚动条_经验交流全部内容，希望文章能够帮你解决css层滚动条_经验交流所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】