Login
网站首页 > 文章中心 > 其它

ie滚动条样式修改

作者:小编 更新时间:2023-07-27 08:55:46 浏览量:449人看过

::-webkit-scrollbar{width:0;}

这样试试

IE是最早提供滚动条的样式支持,好多年了,但是其它浏览器一直没有支持,IE独孤求败了。

这些样式规则很简单:

scrollbar-arrow-color: color; /*三角箭头的颜色*/

scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/

scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/

scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/

scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/

scrollbar-darkshadow-color: color; /*立体孙滚滚动条外阴影的颜色*/

scrollbar-track-color: color; /*立体滚动条背景颜色*/

scrollbar-base-color: color; /*滚动条的基色*/

webkit不再是用简单的几个CSS属性,而是一坨的CSS伪元素:

-webkit-scrollbar 滚动条整体部分

-webkit-scrollbar-button 滚动条两端的按钮

-webkit-scrollbar-track 外层轨道

-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)

-webkit-scrollbar-thumb (拖动条?滑块?滚动条里面可以拖动的那个,肿么翻译好呢?)

-webkit-scrollbar-corner 边角

-webkit-resizer 定义右下角拖动块的样式

通过这些伪元素,可以完全的重写一个网站的滚动条样式。

当然webkit提供的不止这些,还有很多伪类,可以更丰富滚动条样式:

:horizontal – horizontal伪类应用于水平方向的滚动条

:vertical – vertical伪类应用于竖直方向的滚动条

:decrement – decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)

:increment – increment伪类和decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)

:start – start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。

:end – 类似于start伪类,标识对象是否放到滑块的后面。

:double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表肢扒示内层轨道是否紧靠一对按钮。

:single-button – 类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。

:no-button – 用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。

:corner-present – 用于所有滚动条轨道,指示滚动条圆角是否显示则饥余。

:window-inactive – 用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

另外,:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。

OVERFLOW: auto;

网上很容易搜正改到这样的代码,但是提醒一点,就是纯CSS只能设置IE浏闭清做览器的DIV滚动条的样式,火狐轿衡浏览器的不能设置。最好跟jQuery结合来设置,这样比较好。

jQuery有这样的插件。

你想知道的网上有很多代码可提供测试

太多了,我就不写了,但需要注意的是,有些是IE浏览器专属的,火狐和谷歌扒明磨没效果槐肢。

滚动条颜色参数设置:

scrollbar-3d-light-color 设置或检索滚动条亮边框颜色

scrollbar-highlight-color 设置或检索滚动条3D界春斗面的亮边(ThreedHighlight)颜色

scrollbar-face-color 设置或检索滚动条3D表面(ThreedFace)的颜色

scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色

scrollbar-shadow-color 设置或检索滚动条3D界面的暗边(ThreedShadow)颜色

scrollbar-dark-shadow-color 设置或检索滚动条暗边框(ThreedDarkShadow)颜色

scrollbar-base-color 设置或检索滚动条基准颜色

iframe的滚动条样式要IE6.0以上浏览器可以看!你上面的代码碧斗没有问题啊!!放到内嵌页应该可以吧!我没有试过腊悉!不过实在不行你可以用div◆css◆js来做!以前看见悔局磨过这样的代码!

版权声明:倡导尊重与保护知识产权。未经许可,任何人不得复制、转载、或以其他方式使用本站《原创》内容,违者将追究其法律责任。本站文章内容,部分图片来源于网络,如有侵权,请联系我们修改或者删除处理。

编辑推荐

热门文章