手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >给DIV添加滚动条的实现代码
给DIV添加滚动条的实现代码
摘要:直接为div指定overflow属性为auto即可,但是必须指定div的高度,如下:如果要出现水平滚动条,则:overflow-x:auto...

直接为div指定overflow属性为auto即可,但是必须指定div的高度,如下:

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

</div>

滚动条相关颜色属性:

face-color:滑块颜色

hightlight-color:高亮颜色

3dlight-color:三维光线颜色

darkshadow-color:暗影颜色

shadow-color:阴影颜色

arrow-color:箭头颜色

tack-color:滑道颜色

滚动条属性:

overflow:auto为自动,yes为有,no为无

overflow-x:横向滚动条

overflow-y:纵向滚动条

【给DIV添加滚动条的实现代码】相关文章:

DIV点击折叠实例代码

css强制文字不换行实现代码

CSS 制作的三级菜单特效代码

页面背景图片的拉伸实现代码

DIV+CSS常用的网页布局代码

高效整洁CSS代码

div图片marquee无缝连接实现代码

一段巧妙的css debug代码

CSS 网页背景渐变实现代码

DIV滚动条属性

精品推荐
分类导航