CSS自定义浏览器滚动条样式

前言

最近在使用Chrome浏览器访问QQ会员的官网时候发现网站的浏览器默认侧边滚动栏变成了如下图所示的样式,后来上网去查询了一下,然后得知该样式是可以通过CSS来设计的,于是就是自己捣鼓了一下。
CSS自定义浏览器滚动条样式

该样式仅限于Chromium内核的浏览器,比如谷歌浏览器、QQ浏览器、360浏览器等等,非Chromium内核的浏览器则不会显示样式,例如火狐浏览器,欧朋浏览器等等。

方法

CSS元素

样式示例

后记

任何一个网站用户体验至上,所以说给自己的小站加上这个样式也算是增加了一份小小的新意。
    A+
所属分类:CSS

发表评论

请在下方填写评论信息

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

表情 粗体 斜体 图片 引用 链接 删除线 下划线 插代码 签到

目前评论:15   其中:访客  15   博主  0

  1. avatar 米勒 0  来自天朝的朋友 搜狗浏览器 Windows 7 广东省 电信

    这个代码应该放在哪里?新手不太懂 :sad:

    • avatar 憧憬Licoy 博主  来自天朝的朋友 谷歌浏览器 Windows 10 浙江省杭州市 移动

      @米勒 放在css里面,当然了你要具体看怎么设置的。

  2. avatar 红领巾 1  来自天朝的朋友 谷歌浏览器 Windows 10 福建省厦门市 联通

    哈哈哈,早就加了~~~ :???:

  3. avatar 森云 4  来自天朝的朋友 谷歌浏览器 Windows 7 北京市 联通

    这个功能很好哈哈

  4. avatar Koolight 5  来自天朝的朋友 Safari浏览器  Android 4.4.2 PE-CL00 Build/HuaweiPE-CL00 湖北省武汉市 电信

    这个我也有用的。

  5. avatar 森云 4  来自天朝的朋友 谷歌浏览器 Windows 7 北京市 电信通

    来看看博主大神的博客哈哈

  6. avatar 森云 4  来自天朝的朋友 谷歌浏览器 Windows 7 北京市 电信通

    博主很使用的技巧,很喜欢,刚好用到公司的项目中

  7. avatar 我爱动感单车网 3  来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信

    我不喜欢太窄的滚动条样式,个人觉得很不方便使用,感觉跟一条竖线似得令人难以“捕捉”。

  8. avatar 小C博客 4  来自天朝的朋友 QQ浏览器 Windows 7 浙江省杭州市 电信

    好东西!博主也玩QQ飞车啊!

    • avatar 憧憬Licoy 博主  来自天朝的朋友 谷歌浏览器 Windows 10 浙江省杭州市 联通

      @小C博客 我不玩Q飞,只是进入了会员官网有Q飞的活动。