浏览器滚动条的参数总结

摘要:
一些朋友经常问关于IE滚动条的问题,所以我想总结一下这篇文章。简要介绍与浏览器滚动条相关的样式表内容:1。溢出属性溢出设置溢出-x水平内容溢出设置溢出-y垂直内容溢出设置上述三个属性的值是可见(默认)、滚动、隐藏和自动。添加特殊效果:4。在样式表文件中定义类并调用样式表。

有朋友常提关于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>

免责声明:文章转载自《浏览器滚动条的参数总结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇C++ dll调用WebLesson04盒子模型,浮动+定位 17王晶龙下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JavaFX作业8

一基础题 16.21 如何禁用一个文本区域里面的编辑功能? 答:TextArea textarea = new TextArea();     textarea.setEditable(false); 16.24 如何从一个组合框中获取一个条目?如何从一个组合框中获取一个选中条目? 答:ComboBox cb = new ComboBox();     c...

元素大小-偏移量(offset)客户区大小(client)滚动大小(scroll)

一、偏移量---offset 1、定位父级   在理解偏移大小之前,首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetParent与定位有关   定位父级offsetParent的定义------》与当前元素最近的经过定位(position不等于static)的父级元素,主要...

JS 滚动条滚动到指定元素触发

JS 版 <!DOCTYPE html> <html> <head> <style type="text/css">#showIt { 200px; height: 200px; background-color: red;...

vue列表页进入详情页,返回列表项不刷新

功能 像搜索功能,在点击某项进入详情页,再回到搜索界面,如果不做特殊处理,初始化到原来的状态,在vue中可以使用keep-alive缓存搜索界面,达到数据不刷新的结果。 思路 在搜索路由对象的meta添加一个keepAlive属性,值为true,表示在路由切换的时候,会被缓存。这样一来搜索界面的数据不会被初始化。 缓存界面 keepAlive如果为true...

自定义浏览器滚动条样式

为了有助于理解IE中滚动条样式的控制,你可以查看如下的图片: 经过不断的测试发现,在Win8 下面,有一部分样式都起着相同的作用。估计是因为在Win8中扁平化的界面设计而重新定议了系统中滚动条!以下是Win 8下面的滚动条样式,并写出了和CSS支持的情况: 以上所写的几个四个CSS属性,足以控制Win 8系统下,IE浏览器的滚动条样式了。但经过测试...

元素跟随着滚动条运动

有这种情况,页面中的某些元素需要跟随滚动条运动,位置一直在页面中的某个位置; 思路: 当页面滚动的时候,一直获取滚动条距离顶部的距离,当顶部的距离等于某个数值的时候,直接开始改变这个元素的position的值为fixed,不等于这个数值的时候为relative; 注意的是需要在html中写一个和这个元素一样的元素,不等于数值的这个元素为display:no...