Share

subscribe

邮箱订阅精彩内容

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

 

谢谢收看。



随机的文章:

如未声明,本文为NetS H原创,转载请保留可点击的链接:

Apple Mac风格Chrome滚动条

短网址: http://go.netsh.org/link/cw9nd

感谢您的合作 -

分类: 网页设计
 - 2,078 次阅读 - 16条评论

无觅相关文章插件,快速提升流量