[转帖]IE滚动条样式设置详解 - 外贸网站建设,SOHO英文网页制作,网站设计公司--伊路网络工作室 - 建站知识库 - 网站建设专题

登陆

资料

在线

排行

帖子

文件

查询

收件箱

风格

加入收藏

使用帮助


首页 >> 建站知识库 >> 网站建设专题 >> 『网站维护教程\|网页设计经验交流』 >> [转帖]IE滚动条样式设置详解


新帖新投票讨论区精华区	上篇刷新平板下篇

帖子主题: [转帖]IE滚动条样式设置详解

头衔:论坛总管理员

Admin

荣誉：管理员
职务：总版主
级别：圣骑士
积分：547
经验：3330
文章：271
注册：03-01-20 23:27

发表: 2006-12-28 12:56:38 人气:74165

[转帖]IE滚动条样式设置详解

1．Overflow内容溢出时的设置

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

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

visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围，都将显示滚动条。
auto 当内容超出范围时，显示滚动条，否则不显示。

scroll属性对比演示：
代码:
<div style="height:100px;width:100px;overflow-y:scroll;">
test
</div>

<div style="height:100px;width:100px;overflow-y:scroll;">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div>

auto属性对比演示：
代码:
<div style="height:100px;width:100px;overflow-y:auto;">
test
</div>

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

应用：

没有水平滚动条
style="overflow-x:hidden"

没有垂直滚动条
style="overflow-y:hidden"

没有滚动条
style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden"

2．自己定义滚动条的颜色

scrollbar-3d-light-color 立体滚动条亮边的颜色
scrollbar-arrow-color 上下按钮上三角箭头的颜色
scrollbar-base-color 滚动条的基本颜色
scrollbar-dark-shadow-color 立体滚动条强阴影的颜色
scrollbar-face-color 立体滚动条凸出部分的颜色
scrollbar-highlight-color 滚动条空白部分的颜色
scrollbar-shadow-color 立体滚动条阴影的颜色

应用实例：

定义窗口滚动条的颜色(IE5.5+)：

代码:
BODY {
scrollbar-face-color: #C5D5FC;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #C5D5FC;
scrollbar-darkshadow-color: #7C9FD3;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #4D6185;
}

设置多行文本框的颜色：

代码:
<textarea style="scrollbar-face-color: #C5D5FC;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #C5D5FC;
scrollbar-darkshadow-color: #7C9FD3;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #4D6185;">

…………

</textarea>

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

3. 关于自定义滚动条

其原理主要是层的操作，由于其写法多样性，及涉及到层的决对定位，这就不细讲了，附上3个实例。

http://forum.chinavisual.com/download.php?id=55850
http://forum.chinavisual.com/download.php?id=55849
http://forum.chinavisual.com/download.php?id=55851

其中ypSimpleScroll这个实例最容易上手，且更符合面向对象编程原则(推荐)在这简单介绍一下：

<head></head>中
代码:
<script language="javascript" src="ypSimpleScrollC.js"></script>

<script language="javascript">
var test = new ypSimpleScroll("myScroll", 20, 50, 150, 250, 100)
</script>

定义一个ypSimpleScroll对象（该对象为ypSimpleScrollC.js文件中自定义的一个对象）
对象名为test并且设置整体（包括显示部分和滚动条）的5个属性
id、左边距、上边距、宽度、高度、滑块的速度
为myScroll、20、50、150、250、100

<body></body>中
代码:
<div id="myScrollContainer">
<div id="myScrollContent">
…………………………
…………………………
</div>
</div>

其中2个id的名并非随便起的，因前面定义新对象名时设置id为myScroll。
如果定义定义新对象时的设置id为temp
则应写成
代码:
<div id="tempContainer">
<div id="tempContent">
…………………………
…………………………
</div>
</div>

该对象有5个行为（方法）：
scrollNorth() 向上
scrollSouth() 向下
scrollWest() 向左
scrollEast() 向右

-----------------------------------------------------
专业外贸英文网站建设｜多语种网站建设(点击查看方案)

-----------------------------------------------------

相关帖子

[转帖]IE滚动条样式设置详解 (Admin,74165,2006-12-28 12:56:38)