给DIV添加滚动条的实现代码

ttx9n · 发表于 2013-5-3 11:47:25

有时候我们需要为div加滚动条，那么就可以参考下面的代码

直接为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-COLOR:#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：纵向滚动条

rveqwdpw5 · 发表于 2022-9-13 21:18:09

数据库了多久撒快乐的健身卡啦

3pjdk29w · 发表于 2022-9-22 20:06:31

天天源码社区论坛

uj9lpc · 发表于 2023-3-26 02:27:01

我找了挺久终于找到了

Anthonylam · 发表于 2023-9-21 05:12:07

iiguuubhuiuihu

zzhxxx · 发表于 2023-11-14 10:49:21

看到这帖子真是高兴！

溪谷玉贤 · 发表于 2023-12-6 14:19:27

先把创新班才能下班才能下班

r8st9 · 发表于 2024-2-18 20:33:11

66666666666666666666

czoz5y · 发表于 2024-3-2 02:51:19

哟哟哟哟哟以偶

黑白键 · 发表于 2024-4-15 02:52:51

很不错的样子

账号		自动登录	找回密码
密码			立即注册

[CSS] 给DIV添加滚动条的实现代码

相关帖子