轩枫阁

首页 / Web前端 / CSS / CSS3自定义滚动条样式 -webkit-scrollbar

CSS3自定义滚动条样式 -webkit-scrollbar

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢?

前言

webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。

演示

来看看这2个滚动条demo: demo1(图片版)demo2(纯CSS3版)

滚动条组成

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
  • ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
  • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

简洁版

这里就不贴出详细代码了,demo里面可以通过查看源码寻找具体样式的设置。来看看demo2中第二个滚动条的样式

详细设置

定义滚动条就是利用伪元素与伪类,那什么是伪元素和伪类呢?

伪类大家应该很熟悉:link,:focus,:hover,此外CSS3中又增加了许多伪类选择器,如:nth-child,:last-child,:nth-last-of-type()等。

CSS中的伪元素大家以前看过::first-line,:first-letter,:before,:after。那么在CSS3中,伪元素进行了调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”,另外CSS3还增加了一个“::selection”。两个“::”和一个“:”在css3中主要用来区分伪类和伪元素。

webkit的伪类和伪元素的实现很强,可以把滚动条当成一个页面元素来定义,再结合一些高级的CSS3属性,比如渐变、圆角、RGBa等等。然后如果有些地方要用图片,可以把图片也可以转换成Base64,不然每次都得加载那个多个图片,增加请求数。

任何对象都可以设置:边框、阴影、背景图片等等,创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂,具体怎么写可以看第一个demo,那里也有注释。

306/470
308/470

相关阅读

文章评论

  • 能教教我,这个导航栏的音乐是怎么做到的吗?弄了好久都是大大小小的bug的,弄不成想这个网站一样的效果啊,真心想知道

    • 这个要用到队列概念,不然做不出1:1效果,可以点击头像看看我网站导航

  • 无法兼容firfox,ie

    • 是的,高级浏览器有效

  • 在路上听到一40岁左右的妇女在对一小女孩说道:“小妹妹啊!你不要再叫我阿姨了,叫我姐姐好吗?不然会让人觉得的我很老的样子。”只听那小女孩说道:“叫你姐姐?那不是让人觉得我很老吗?”妇女……卒……

  • 要是把你的飞机直接飞到左上角.你logo上那个飞机的位置上那更吊[哈哈]

    • 不错的想法![哈哈]

  • 我见过的最好的文章了,谢谢博主

  • 进口绝缘材料

  • 这个不错,想问一下滚动条的位置能不能控制?都是在右或下边。我想放在上边或左边怎么控制。

    • 你这个也太逆天了吧,不符合用户习惯呀,不知道怎么实现,谷歌去吧

      • 工作中的确有这种需求,模拟出来效果不好最好放弃了。页面太高,用户必须拉到页面底下才看到横向滚动条,拉完后又要上来做操作。所以顶部滚动条并不反人类。同样左边滚动条也不反人类。

        • 自己找点插件吧

  • 好腻害~~

  • 赞一个!

  • […] 原文来自:http://www.xuanfengge.com/css3-webkit-scrollbar.html […]

  • 这个好,看着很舒服

  • 这logo这飞机,真是屌爆啦!现在木有毕业的学生就这么牛B哄哄,叫人怎么活啊!

  • 我的天哇这特效太顶赞了~~~按下LOGO纸飞机那一段特别喜欢

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子