HTML怎么添加滚动条

html-css012

HTML怎么添加滚动条,第1张

需要准备的材料分别有:电脑、浏览器、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>