页面导航：首页 → 网络编程 → CSS/HTML → 经验交流 → 正文内容 css 滚动条

css层滚动条

发布：dxy 字体：[增加减小] 类型：转载

比较有特色的滚动条效果代码

点击运行可以看到效果:

<html> 
<head><title>层滚动条DIY - Powered by yexj00</title> 
<style> 
 
</style>

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"> 
 
</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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：css 层滚动条

百度中搜索更多的关于css层滚动条内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：div+css如何实现页脚的置底
下一篇文章：Firefox返回时Iframe的显示Bug的解决方法

文章评论

共有位脚本之家网友发表了评论我来说两句

css层滚动条

文章评论

同类文章

最近更新

热点排行

css层滚动条

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行