`

IE滚动条属性

阅读更多
IE滚动条样式属性

1,Overflow内容溢出时的设置

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

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

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

应用:

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

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


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

自动显示滚动条
<div style="height:100px;width:100px;overflow:auto;">test</div>

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

我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:/*这里放注释的代码*/

Body {
scrollbar-arrow-color: #f4ae21;  /*图6,三角箭头的颜色*/
scrollbar-face-color: #333;  /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666;  /*图1,立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666;  /*图2,滚动条空白部分的颜色*/
scrollbar-shadow-color: #999;  /*图3,立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666;  /*图4,立体滚动条强阴影的颜色*/
scrollbar-track-color: #666;  /*图7,立体滚动条背景颜色*/

scrollbar-base-color:#f8f8f8;  /*滚动条的基本颜色*/
Cursor:url(mouse.cur);  /*自定义个性鼠标*/
}

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

分享到:
评论

相关推荐

    div不随滚动条的滚动而动 可以兼容到IE6

    div不随滚动条的滚动而动 可以兼容到IE6 绝对好用

    34款经典Dreamweaver插件

    设置IE滚动条属性(可应用于整个站点,IE4以上支持) Swap Flash 类别:DW Behavior 文件格式:mxp 像轮换图片一样轮换Flash 动画 Disable View Source Code 类别:DW Command 文件格式:mxp 禁止用户通过...

    textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法

    在IE下文本框textarea会显示滚动条(如下:) 去掉textarea横向或纵向滚动条办法: &lt;textarea style="overflow:hidden"&gt;&lt;/textarea&gt; 可以通过overflow-x:hidden和overflow-y:hidden控制横向和纵向滚动条...

    详解如何自定义CSS滚动条的样式

    本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。 0.需求 有的时候我们不想使用浏览器默认的滚动条样式,因为不够定制化和美观。那么如何...

    使用CSS隐藏元素滚动条的示例代码

    如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可。...对于IE,我们需要使用-ms-prefix属性定义滚动条样式:

    微信小程序scroll-view的滚动条设置实现

    没有一个属性是去控制显示/隐藏滚动条,更别说这样式。所以文档是指望不上了。 2。既然是组件,那就是css来控制的。又去看一下css中的scroll的介绍,有大概如下的属性:参考链接。 上图位置&lt;1&gt;:-webkit-scrollbar ...

    JS弹出层遮罩,隐藏背景页面滚动条细节优化分析

    一、去除滚动条方法 给body添加overflow:hidden属性即可,IE6、7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6、7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:...

    HTML 隐藏滚动条和去除滚动条的方法

    1. html 标签加属性 ... &lt;html lang="en" class="no-ie" style="overflow:hidden;"&gt;  2.body中加入以下代码 ... &lt;style type="text/css"&gt;...html页面去除滚动条的方法 为了防止以前的css文

    html,小程序scroll-view去除滚动条

    子盒子添加内容溢出滚动条显示属性 overflow-y:scroll 并设置好宽高 可实现隐藏滚动条也可是滚轮触发滑动,使用此方法 无法监听window的滚动条事件。 代码示例: .box{ width:300px; height: 400px; overflow: ...

    Android ListView 滚动条的设置详解及实例代码

    1.滚动条的属性 android:scrollbarAlwaysDrawHorizontalTrack 设置是否始终显示水平滚动条。这里用ScrollView、ListView测试均没有效果。 android:scrollbarAlwaysDrawVerticalTrack 设置是否始终显示垂直滚动条。...

    html 隐藏滚动条的简单实现

    1. html 标签加属性 ... &lt;html lang="en" class="no-ie" style="overflow:hidden;"&gt;  2.body中加入以下代码 ... &lt;style type="text/css"&gt;...以上这篇html 隐藏滚动条的简单实现就是小编分享给

    Android ListView隐藏右侧滚动条功能

    关于ListView的滚动条几种情形: 1、默认情况:活动(滚动)时显示,不活动时隐藏。 2、活动和不活动时都显示。 3、活动和不活动时都隐藏。 上述集中情况,均有ListView的以下设置属性方法控制 1、...

    FireFox火狐浏览器与IE兼容问题 – 透明滤镜 DIV滚动条

    /*FireFox(火狐)不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了,标准的是pointer 问题二:FireFox(火狐)不支持滤镜 最常见的半透明不支持。 filter: Alpha(Opacity=50); /* for IE */ opacity: ...

    el-table-bar-base:element-ui 表格滚动条插件

    el-table-bar-base 自定义element-ui 表格滚动条组件 ...新增native属性,在设置表格fixed贴合情况下还原滚动条 v2.0.7 新增类型声明文件.d.ts v2.0.6 说明文档更新 v2.0.5 修复 offsetLeft 在嵌套路由下出现的计算偏差

    js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...

    IE6特有bug兼容性问题整理

    结果IE6下,背景不固定了,只看到背景图片随着滚动条上下移动而移动。演示页面 要解决这个问题呢,也是有办法的,就是将fixed属性转移到html标签上就可以了。即: html{background:white url(../image/404.png) no-...

    Android TextView实现垂直滚动效果的方法

    本文实例讲述了Android TextView实现垂直滚动效果的方法。分享给大家供大家参考,具体如下: 在TextView中,如果文本...其中X表示滚动条从出现到消失的时间,单位是毫秒。 下面是一个完整的XML代码例子。 &lt;?xml ver

    IE6不兼容position:fixed属性的解决办法分享

    及上下两边,共四种位置的固定,与以往的教程不同的地方是,它使用CSS表达式来兼容IE5、IE6,且避免了js模拟时,拖动滚动条时出现抖动的问题,另外在IE5或者怪癖模式下也完全正常,没有任何问题。如果你有更好的方案...

    telex:Javascript新闻滚动条

    电传2.0新闻滚动条Telex是用于文本消息的水平新闻滚动器。 它可以用于连续显示突发新闻,交通信息,股票报价等。 可以在滚动,速度和其他选项更新时添加或删除消息。 Telex是一个Javascript(ES2015)小部件。 它可...

    HTML&CSS&JS兼容树(IE,Firefox,chrome)

    简单讲,点击一个链接,会展开下级目录,再点击会合上,这个就是最简单的树,如何去实现呢,也很简单,css里有一个属性display,这个可以控制内容的现实还是不显示,那么再通过js来控制css的属性即可实现,看如下...

Global site tag (gtag.js) - Google Analytics