建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

用CSS自定义滚动条的样式

更新时间:2016-12-26整理编辑:建站学习网阅读:0

 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下。当然,兼容所有浏览器的滚动条样式目前是不存在的。

 
IE下的滚动条样式
 
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; /*滚动条的基色*/ 
------------------------------------------------------------------------------------------
大概就这些,你也可以定义cursor来定义滚动条的鼠标手势。
 
这里,很久以前danger做了个基于Flash的可视化工具,简单但是好用:
 
选中CSS选项即可自动生成CSS样式,这里不再过多的介绍了。嗯,多谢大猫老湿推荐。
 
webkit的自定义滚动条样式
 
yes,这里才是今天要重点介绍的。
 
从上一部分的样式名中就可以看到,IE只能定义相关部分的color等属性,这样太不灵活了。
 
webkit最近实现了对滚动条的支持,先看一个简单的demo:
 
不过,webkit不再是用简单的几个CSS属性,而是一坨的CSS伪元素:
 
: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 等伪类同样可以用于滚动条中。
 
关于具体的demo,这里不再做了,网上已经有很多demo可以参考,比如,webkit官方的这个,具体的线上项目中也有现成的例子,比如,QQ空间的签到弹出框和豆瓣说的右侧详情栏(某条信息评论多的时候会显示)。
 
值得一提的是,webkit的这个伪类和伪元素的实现很强大,虽然类目有些多,但是我们可以把滚动条当成一个页面元素来定义,也差不多可以用上 一些高级的CSS3属性,比如渐变、圆角、RGBa等等,当然有些地方也可以用图片,然后图片也可以转换成Base64,总之,可以尽情发挥了。

本文网址:https://www.dedexuexi.com/divcss/jc/1521.html

文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:技巧
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
IE6 innerHTML写入的iframe src不显示BUG的解决方法
« 上一篇2016年12月26日
div+css实现的滑动门
2016年12月26日下一篇 »
  • DIV CSS如何给文字字体添加下划线?
    0阅读
    在css中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用text-decoration属性设置css的text-decoration属性用于指定添加到文本的修饰,其underline属...
  • 纯CSS3实现带动画效果导航菜单无需js
    0阅读
    随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3。网页能表达的东西越来越多,css3兴起已经
  • CSS定义超链接四个状态的正确顺序L-V-H-A
    0阅读
    css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的简写
  • 在ie7下css居中样式text-align:center;偏左问题解决方法
    0阅读
    css样式text-align:center;在ie7下偏左问题,想必有很多朋友的遇到过吧,下面有个不错的方法,大家可以参考下,希望对大家有所帮助 复制代码 代码如下: body { text-align:center; } 用ie7打开是居左的。
  • 对div盒子模型使用心得总结
    0阅读
    相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下 盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content
 
QQ在线咨询

添加微信客服