浏览器滚动条的参数总结_内嵌框架中的滚动条,应设置()参数-优快云博客

本文链接：https://blog.youkuaiyun.com/sky_zhangfan/article/details/3864659

有朋友常提关于IE滚动条的问题，特总结该贴。简单地介绍一下涉及浏览器滚动条的样式表内容（某些样式需ie5.5+才能支持）：

1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

overflow-x版本：IE4+专有属性　继承性：无

语法：

overflow-x : visible | auto | hidden | scroll

取值：

visible	:	默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
auto	:	在必需时对象内容才会被裁切或显示横向滚动条
hidden	:	不显示超过对象尺寸的内容
scroll	:	总是显示横向滚动条

说明：

检索或设置当对象的内容超过其指定宽度时如何管理内容。
所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。
对于 table 来说，假如 table-layout 属性设置为 fixed ，则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ，那么超出 td 尺寸的内容将被剪切。如果设为 visible ，将导致额外的文本溢出到右边或左边（视 direction 属性设置而定）的单元格。
自IE5开始，此属性在MAC平台上可用。
自IE6开始，当你使用 !DOCTYPE 声明指定了 standards-compliant 模式，此属性可以应用于 html 对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 overflowX 。

示例：

body { overflow-x: hidden; }
div { overflow-x: scroll; height: 100px; width: 100px; }

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

我们通过几个实例来讲解上述的样式属性：

1.让浏览器窗口永远都不出现滚动条
没有水平滚动条
<body style="overflow-x:hidden">
没有垂直滚动条
<body style="overflow-y:hidden">
没有滚动条
<body style="overflow-x:hidden;overflow-y:hidden">或<body
style="overflow:hidden">

2.设定多行文本框的滚动条

没有水平滚动条
<textarea style="overflow-x:hidden"></textarea>

没有垂直滚动条
<textarea style="overflow-y:hidden"></textarea>

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

3.设定窗口滚动条的颜色

设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果：
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">

4.在样式表文件中定义好一个类，调用样式表。