需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<body>标签中,输入html代码:<div style="overflow: scroll">hello world!</div>。
3、浏览器运行index.html页面,此时成功在html中指定的div中添加了滚动条。
overflow:scroll/*任何时候都强制显示滚动条*/overflow:auto/*需要的时候会出现滚动条*/
overflow-x:auto/*控制X方向的滚动条*/
overflow-y:auto/*控制Y方向的滚动条*/
示例:
<HTML>
<HEAD>
<TITLE>测试表格内的滚动条</TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td>表格内的滚动条:</td>
<td>
<div id="wins"
style="position:absoluteheight:200width:200overflow:autobackground:#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>
这是网页浏览器的默认功能啊,如果你的网页内容超过当前浏览器窗口的长度或宽度就会自动出现纵向或横向滚动条,方便观看页面超出部份内容。如果你的网页内容小于当前窗口的长度或宽度就自然不会出现滚动条啊。