overflow页面滚动样式详解
一、首先来了解一下overflow
overflow：内容溢出时的设置，可以设置对象是否显示滚动条，
overflow-x：指水平方向内容溢出时的设置
overflow-y：指垂直方向内容溢出时的设置
它们设置的值为visible、scroll、hidden、auto。
visible是默认值。使用这个值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都会被强制显示出来。
hidden效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll无论内容是否超出范围，都会显示滚动条。
auto当内容超出范围时，自动显示滚动条，否则不显示。
例如：
1.浏览器窗口不出现滚动条：
a.没有水平滚动条：<body style="overflow-x:hidden">
b.没有垂直滚动条：<body style="overflow-y:hidden">
c.没有滚动条：<body style="overflow-x:hidden;overflow-y:hidden">
或<body style="overflow:hidden">
2.让多行的文本隐藏滚动条：
a.没有水平滚动条：<textarea style="overflow-x:hidden"></textarea>
b.没有垂直滚动条：<textarea style="overflow-y:hidden"></textarea>
c.没有滚动条：<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<body style="overflow:hidden"></textarea>
二、设定滚动条的颜色在浏览网页的时候我们有时可以看到有许多网页滚动条颜色不是系统默认的，而是漂亮的粉红色或其它颜色，其实只要在网页代码中加入一些代码就可以实现。
DIY属于你自己的滚动条，将这些代码加入到<head></head>中间。
<style type="text/css">
<!--
Body {
scrollbar-face-color:#FFFFFF; /*立体滚动条凸出部分的颜色*/
scrollbar-highlight-color:#FFFFFF; 滚动条空白部分的颜色
scrollbar-shadow-color:#808080; 立体滚动条阴影部分的颜色
scrollbar-arrow-color:#000000; 滚动条箭头颜色
scrollbar-track-color:#E0E0E0; 滚动条背景颜色
scrollbar-3dlight-color:#C0C0C0; 立体滚动条亮边的颜色
scrollbar-darkshadow-color:#000000; 立体滚动条强阴影的颜色
scrollbar-base-color:#333333; 滚动条的基本颜色
}
-->
</Style>
三、最后看一个具体运用这是我的photo页面为方便浏览照片时添加滚动条的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>dragon★龙的相册</title>
<style type="text/css">
<!--
#tiao {
height: 260px;
width: 200px;
overflow-y:auto;
}
body {
scrollbar-face-color:#EEFAFF;
scrollbar-highlight-color:#FFF;
scrollbar-Shadow-color:#3bb8ff;
scrollbar-arrow-color:#3bb8ff;
scrollbar-track-color:#FFF;
}
-->
</style>
</head>
<body>
<div id="tiao">
<img src="myphoto/luori/lr1.jpg"/>
<img src="myphoto/luori/lr2.jpg"/>
<img src="myphoto/luori/lr3.jpg"/>
<img src="myphoto/luori/lr4.jpg"/>
<img src="myphoto/luori/lr5.jpg"/>
</body>
</html>
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
