您的位置：首页 > 其它

给页面添加滚动条

2013-08-27 13:45 316 查看

1.overflow内容溢出时的设置

overflow 水平及垂直方向内容溢出时的设置

overflow-x 水平方向内容溢出时的设置

overflow-y 垂直方向内容溢出时的设置

上面三个属性设置的值为visible、scroll、hidden、auto

visible- 默认值，使用该值时，无论设置的 width 和 height 的值是多少，其中的内容是否超出范围都将被强制显示。

hidden-与visible是相反的效果，任何超出 width 和 height 的内容都会不可见

scroll-无论内容是否超出范围，都将显示滚动条。

auto-当内容超出范围时，显示滚动条，否则不显示

应用

没有水平滚动条

<div style="overflow-x:hidden">test</div>

没有垂直滚动条

<div style="overflow-y:hidden">test</div>

没有滚动条

<div style="overflow-hidden；overflow-y:hidden;">test</div>

或者

<div style="overflow:hidden">test</div>

自动显示滚动条

<div style="height:100px;width:100px;overflow:auto;">test</div>

2.自定义滚动条的颜色

body{

scrollbar-arrow-color:#f4ae21;/*三角箭头的颜色*/

scrollbar-face-color:#333;/*立体滚动条的颜色*/

scrollbar-3dlight-color:#666;/*立体滚动条亮变的颜色*/

scrollbar-highlight-color:#666;/*滚动条空白部分的颜色*/

scrollbar-shadow-color:#999;/*立体滚动条阴影的颜色*/

scrollbar-darkshadow-color:#666;/*立体滚动条强阴影的颜色*/

scrollbar-track-color:#666;/立体滚动条北京颜色*/

scrollbar-base-color:#f8f8f8;/*滚动条的基本颜色*/

Cursor:url(mouse.cur);/*自定义个性鼠标*/

}

以上2项适用与<body>、<div>、<textarea>、<iframe>

<html>

<head>

<meta http-equiv="Content-Language" content="zh-cn">

<meta http-equiv="Content-Type" content="text/html;

charset=gb2312">

<title>用CSS控制滚动条样式</title>

<STYLE>

BODY {

}

</STYLE>

</head>

<body>

<p> </p>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航