Apple Mac风格Chrome滚动条

2,166 次阅读 -  17 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

  • YouTube、Google+、Facebook、Twitter、维基百科最全hosts
  • 不需连电脑iTunes也同步iPhone音乐: MewSeek
  • jQuery hash 插件
  • 浅析 iOS 指纹识别 Touch ID 的安全性
  • Mac 为 SSD 硬盘 Secure Erase 安全擦除的方法
  • 提高Adsense收入:设计广告 提高点击率(二)
  • 网站图片JPG、PNG、GIF哪个好,该选择谁
  • Speaktoit Assistant 语音助理: 最佳的Android版Siri
  • Google+: 使用技巧两则
  • 可爱猫猫图片大荟萃 : 猫咪特辑
  • Google+游戏试玩体验
  • 15个好玩的Android游戏推荐