如何给DIV添加滚动条?

发布时间:2020-02-03编辑:脚本学堂
为div指定overflow属性auto,指定其高度就可以给DIV添加滚动条,本文举一例子,大家参考一下。

代码如下:
 

复制代码 代码示例:
<div style="position:absolute; height:400px; overflow:auto"></div>
 

要出现水平滚动条,则: overflow-x:auto
同理,垂直滚动条为: overflow-y:auto
如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative
例如
 

复制代码 代码示例:
<HTML>
<HEAD>
<TITLE>测试表格内的滚动条</TITLE>
</HEAD>
<BODY>
<table>
  <tr>
    <td>表格内的滚动条:</td>
    <td>
      <div id="wins"
        style="position:absolute;height:200;width:200;overflow:auto;background:#EEEEEE;">
        <p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>
        <p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2" align="right">
      <span onmouseover='scrollb=setInterval("wins.scrollLeft-=10",100)'
                 onmouseout=clearInterval(scrollb)>向左</span>
            <span onmouseover='scrollb=setInterval("wins.scrollTop-=10",100)'
                        onmouseout=clearInterval(scrollb)>向上</span>
      <span onmouseover='scrollb=setInterval("wins.scrollLeft+=10",100)'
                 onmouseout=clearInterval(scrollb)>向右</span>
      <span onmouseover='scrollb=setInterval("wins.scrollTop+=10",100)'
                 onmouseout=clearInterval(scrollb)>向下</span>
    </td>
  </tr>
</table>
</BODY>
</HTML>
 

如果想更好的实现效果可以参考下面的代码:
DIV滚动条,就是利用DIV标签,在里面嵌入css样式表,加入overflow的属性值,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场。其功能为了节约页面空间。
代码如下:
 

复制代码 代码示例:
<DIV
style="PADDING-RIGHT:10px;OVERFLOW-Y:auto;PADDING-LEFT:10px;SCROLLBAR-FACE-COLOR:#ffffff;FONT-SIZE:11pt;PADDING-BOTTOM:0px;SCROLLBAR-HIGHLIGHT-CO
LOR:#ffffff;OVERFLOW:auto;WIDTH:510px;SCROLLBAR-SHADOW-COLOR:#919192;COLOR:blue;SCROLLBAR-3DLIGHT-COLOR:#ffffff;line-height:100%;SCROLLBAR-ARROW-
COLOR:#919192;PADDING-TOP:0px;SCROLLBAR-TRACK-COLOR:#ffffff;FONT-FAMILY:宋体
;SCROLLBAR-DARKSHADOW-COLOR:#ffffff;LETTER-SPACING:1pt;HEIGHT:200px;TEXT-ALIGN:left">
</div>
 

 滚动条相关颜色属性:
 

复制代码 代码示例:
 face-color:滑块颜色
  hightlight-color:高亮颜色
  3dlight-color:三维光线颜色
  darkshadow-color:暗影颜色
  shadow-color:阴影颜色
  arrow-color:箭头颜色
  tack-color:滑道颜色
 

  滚动条属性:
  

复制代码 代码示例:
overflow:auto为自动,yes为有,no为无
  overflow-x:横向滚动条
  overflow-y:纵向滚动条