需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：<div style="overflow: scroll">hello world!</div>。
3、浏览器运行index.html页面，此时成功在html中指定的div中添加了滚动条。
1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）.
overflow-x水平方向内容溢出时的设置.
overflow-y垂直方向内容溢出时的设置.
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）.
scrollbar-arrow-color上下按钮上三角箭头的颜色.
scrollbar-base-color滚动条的基本颜色.
scrollbar-dark-shadow-color立体滚动条强阴影的颜色.
scrollbar-face-color立体滚动条凸出部分的颜色.
scrollbar-highlight-color滚动条空白部分的颜色.
scrollbar-shadow-color立体滚动条阴影的颜色.
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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）