网页滚动条样式 overflow 转

转自http://hi.baidu.com/uecd/home

一、首先来了解一下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">　　
　　　　
　　</Style>　

三、最后看一个具体运用
这是我的photo页面为方便浏览照片时添加滚动条的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>dragon★龙的相册</title>
<style type="text/css">

</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>

我把这个照片显示框的ID命名为"tiao"，在head部分设置了它的宽、高以及滚动条的颜色，DIY的滚动条就制作完成了。很简单吧~

来源：https://www.cnblogs.com/ndxsdhy/archive/2011/03/14/1984154.html

标签

overflow

滚动条