Apple Mac风格Chrome滚动条

2,127 次阅读 -  16 Comments

虽然诸如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的教程,有兴趣可以自己试试。

 

谢谢收看。



如未声明,本文为 Netsh 原创,转载时烦请保留原文链接。

Random Posts

  • CSS实现模拟漫画气泡对话效果
  • 如何一步步把网站Retina优化
  • 加载 jQuery 的正确方式
  • 让网站统计工具不统计自己:WordPress技巧
  • 巧解决Google时常中断的问题
  • Google+上收集的有趣图片
  • 12个强大的 Chrome 插件扩展 推荐 (二)
  • iPhone越狱后八款强大插件推荐 (2013)
  • jQuery hash 插件
  • 快速修改Hosts脚本
  • 为WordPress添加面包屑导航 (Breadcrumbs)
  • 网站图片JPG、PNG、GIF哪个好,该选择谁