23.html

来自「div布局的滚动条,可自定义样式,可读性强」· HTML 代码 · 共 64 行

HTML

64 行

<html>
<head><title>层滚动条DIY - Powered by yexj00</title>
<script type="text/javascript" src="divScroll.js"></script>
<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">
<!--
document.onmousedown=dragit;
//document.onmouseup=new Function("drag=false;$('scroll_bar').style.background='#efefef'");
document.onmouseup=new Function("drag=false;");
//-->
</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">

<!-- 这是层的内容区 -->
aaaaaaaaaaaadsfs<br/>
sdfsdf<br/>
fwef<br/>
erg<br/>
sdfsdf<br/>
fwef<br/>
erg<br/>
sdfsdf<br/>
fwef<br/>
erg<br/>
sdfsdf<br/>
fwef<br/>
erg<br/>
sdfsdf<br/>
fwef<br/>
erg<br/>
<!-- 层的内容区结束 -->

  </div>
  <div id="up_btt" style="position:absolute; left:104px; top:5px; width:20px; height:16px; background-image:url(expend.gif); font-size:0px;border:1px outset #cccccc"></div>
  <div id="scroll_area" style=" position:absolute; left:104px; top:22px; width:20px; height:66px;font-size:0px; background:#FF0000">
      <div id="scroll_bar" style="position:absolute; left:0px; top:0px; width:20px;background-image:url(right.gif); font-size:0px;border:1px outset #cccccc"></div>
  </div>
  <div id="down_btt" style="position:absolute; left:104px; top:89px; width:20px; height:16px; background:#efefef;font-size:0px; border:1px outset #cccccc"></div>
</div>

</body>
</html>

23.html - 源码说明

本页面展示了「div布局的滚动条,可自定义样式,可读性强」中的 23.html 源码文件，采用 HTML 编程语言编写，共 64 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫开发者社区收录了大量与CSS相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C

搜索代码Ctrl + F

全屏模式F11

增大字号Ctrl + =

减小字号Ctrl + -

显示快捷键?