浏览器滚动条的参数总结

浏览器

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

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

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.在样式表文件中定义好一个类,调用样式表。

<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>

这样调用:

<textarea class="coolscrollbar"></textarea>

时间: 2024-12-27 15:21:46

浏览器滚动条的参数总结的相关文章

IE浏览器滚动条的参数总结参考

参考|浏览器 有朋友常提关于IE滚动条的问题,特总结该贴.简单地介绍一下涉及浏览器滚动条的样式表内容(某些样式需ie5.5+才能支持): 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)    overflow-x水平方向内容溢出时的设置    overflow-y垂直方向内容溢出时的设置    以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色) 

网页制作中有关设置浏览器滚动条的参数

浏览器|网页 有朋友常提关于IE滚动条的问题,特总结该贴.简单地介绍一下涉及浏览器滚动条的样式表内容(某些样式需ie5.5+才能支持): 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)overflow-x水平方向内容溢出时的设置overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)scrollbar-arr

学习:使用CSS修改IE浏览器滚动条的参数

css|浏览器 有朋友常提关于IE滚动条的问题,特总结该贴.简单地介绍一下涉及浏览器滚动条的样式表内容(某些样式需ie5.5+才能支持): 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)overflow-x水平方向内容溢出时的设置overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)scrollbar-ar

使用CSS样式控制浏览器滚动条的参数总结【zz】

在做到一定特殊风格的网站时候常常为了美观我们需要更改滚动条的颜色及相关设置.那么如何使用标准的样式来控制滚动条呢?经过多次的尝试和总结,我们来简单地介绍一下涉及浏览器滚动条的样式表内容(某些样式需ie5.5+才能支持): 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)    overflow-x水平方向内容溢出时的设置    overflow-y垂直方向内容溢出时的设置    以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.scr

QTP中利用DOM实现拖动浏览器滚动条

有的时候需要在测试的过程中需要模拟拖到浏览器的滚动条,我们可以通过Dom调用DocumentElement下的ScrollTop方法实现. 步骤: (1)通过DOM获取Page的body高度,这个高度是滚动条滚动的最大范围 MaxHeight=Pageobj.Object.body.ClientHeight (2)通过DOM调用Page的DocumentElement下的ScrollTop方法,为ScrollTop方式传入参数,实现滚动 Pageobj.Object.DocumentElemen

jquery在浏览器滚动条上的应用

Google阅读器上有一个AJAX效果很不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止.对于我来说再好不过了,因为我很不喜欢翻页,尤其是输入页码再定位到页.要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义.我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据.至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝试-- 我试着用jquery来实现这个功能.先要

ie bho 插件:如何获得浏览器滚动条变化事件

问题描述 ie bho 插件:如何获得浏览器滚动条变化事件 我已经写了一个简单的bho. 目的是知道浏览器的滚动条是否滚动. DISPID_DOCUMENTCOMPLETE事件可以获取. DISPID_HTMLWINDOWEVENTS2_ONSCROLL 事件不能获得. class部分: class ATL_NO_VTABLE Chellobho : public CComObjectRootEx, public CComCoClass, public IObjectWithSiteImpl,

玩flash游戏时,按键盘方向键ie浏览器滚动条会跟着滚动的解决方案

今天在调试一个FLASH游戏网站的游戏页面,发现在玩FLASH游戏的时候,鼠标放在FLASH上面后,用键盘操控FLASH上赛车游戏前进方向,突然发现,在按键盘上下方向键时,IE的滚动条竟然跟着翻动起来,通过QQ群很多技术员咨询后,依然没得到答案,调试了半天,在按上下方向键的时候,浏览器右边的滚动条还是跟着一上一下的滚动. 最后,再仔细的分析了情况,理论上鼠标放在FLASH上面,键盘的焦点应该锁定在FLASH游戏里了,一定是FLASH调用代码有问题,在查阅了大量的相关资料后,终于找到解决方法: 把

javascript-js如何隐藏浏览器滚动条却能保持内容滚动?

问题描述 js如何隐藏浏览器滚动条却能保持内容滚动? 尝试了 document.documentElement.style.overflowY = 'hidden'; 隐藏了滚动条但内容不能滚动了. 或是 ::-webkit-scrollbar { width: 0px; } 但是只有 chrome 能用. 请问有没有办法隐藏浏览器滚动条却能保持内容滚动? 还有能不能通过JS获取或者更改 滚动条(不是scrollHeight,而是那个bar的高度)的高度? 解决方案 添加mousewheel事件