Apple Mac风格Chrome滚动条

2,312 阅读 - 18

虽然诸如Scroll Bar XChrome扩展可以修改你的滚动条样式,但是毕竟是以扩展程序的形式安装,确让人感到不很省心。不过既然Chrome使用的是Webkit内核,那为何不用webkit本身提供的CSS伪类来实现无扩展美化滚动条呢?

apple mac style chrome slider 2

Webkit的CSS伪类

正是因为webkit拥有丰富的CSS伪类,才使得Chrome浏览器的web体验变得十分丰富。同样,我们也可以通过在CSS添加样式的方式,来达到美化的目的,还好,Chrome为我们提供了一个叫做User StyleSheets的功能,我们可以通过修改custom.css的内容来达到全局CSS设定,让所有的页面全部沿用你设定的CSS,从而达到所有页面的滚动条都美化的目的,而且你还可以自由修改,不使用任何插件。下面需要做的就是修改User StyleSheets

修改Custom.css

user stylesheet custom css windows 7

在如下位置找到你的custom.css文件:

apple mac style chrome slider

Windows:

%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Mac:

/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Ubuntu:

~/.config/chromium/Default/User\ StyleSheets/Custom.css


如果启动参数使用了--user-data-dir

如果你在Chrome启动程序加入了--user-data-dir参数(把缓存、用户数据转移到其他地方),则应该到相应目录下找到User StyleSheets\Custom.css,而不是上述路径。

Apple Mac 风格滚动条代码

因为内容较多,请先下载此文件(16KB),并用文本编辑器打开,将里面的内容全部复制添加到上述custom.css文件中,最后保存。

如果没有立即看到Chrome里的更改,请关闭浏览器再重新打开,看,是不是Chrome浏览器滚动条风格变成了熟悉华丽的Mac风格了呢?

关于此CSS代码

首先此代码理论上支持所有Webkit内核的浏览器。

其次,文件之所以比较大的原因是我将其中的图片素材全部转换成了Base64编码,原代码是来自apple.com的在线图片,而经过我的优化后可以达到离线使用、减少web请求的作用。

根据自己的喜好修改

当然,你可能不喜欢这样的滚动条。不过,既然你已经知道了方法,有什么好的创意,也可以自行修改CSS来折腾。欢迎分享。在这里有一个关于Webkit Scrollbar的教程,有兴趣可以自己试试。

 

谢谢收看。

随机推荐

  • http://www.imarry.me 福州婚纱摄影

    很好的东西啊 要学学

  • http://www.seoyisheng.com/ 阿文

    维基百科在百度怎么搜不到了?

  • http://www.sdjnhbglc.com 烟气余热回收

    个人博客 逛着逛着都快一点了都,明天还得早起 哎 睡觉去。 多多更新内容 -默为

  • http://yusky.me Yusky

    感觉这个木有神马用~~

  • http://www.bcsjkorea.com 美白保湿品

    维基百科好用不好用

  • http://www.qdhwhz.com 青岛专业网站建设

    百度百科我在用,那个维基百科倒是没用过

  • http://www.sdjnhbglc.com 烟气余热回收

    平时不怎么看电视剧的,这两天看中央一的 你是我的幸福 看迷了都。唉 网上没有 着急 --默为转转

  • http://t.cn/auaKdM http://t.cn/auaKdM

    楼主的文章灰常有深度 嘿嘿 先收藏订阅了 顺便推荐几个比较热门的Chrome购物APP应用程序~ http://t.cn/auaKdM 全部收集自Google官方旗下的Chrome Web Store;-)

  • http://www.izsy.net clouder

    原来还可以这样

  • http://www.meifuw.cn/brand.php 韩国化妆品

    chrome有很多不好的问题比如兼容就很头疼。。有的网站打开就看不到正常的网站。。

  • http://yusky.me Yusky

    只是来打酱油的。。。不怎么喜欢APPLE的风格

  • http://www.popbedding.com bedspreads

    回去弄我的

  • http://www.ccgongyu.com 长春短租房

    谢博主分享,支持一下!

  • http://www.taoj.net.cn 提金

    很好看,很实用

  • http://www.hengzuobiao.com 横坐标

    支持一下

  • http://www.hengzuobiao.com 励志故事

    我是来做广告的,我自己认为值得一看的,欢迎回访哦

  • http://www.douban.com/people/wsya/ 脆弱不是我。

    越接触chrome才越知道它是如何的可以被私人定制~

  • lyk081

    下载不了