顶部  评论
分享： 更多
发现更多»
分享选中文字: 新浪微博 或 腾讯微博
1,682 次阅读
作者

Apple Mac风格Chrome滚动条

虽然诸如Scroll Bar X的Chrome扩展可以修改你的滚动条样式，但是毕竟是以扩展程序的形式安装，确让人感到不很省心。不过既然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的教程，有兴趣可以自己试试。

 

谢谢收看。



随机的文章:

您可能对这些还感兴趣:

  1. 制作博客大黑条 (导航条)
  2. jQuery Scroll (jQuery平滑滚动) 插件
  3. CSS Transition (变换动画)
  4. jQuery Background Position Animate (jQuery背景位置变换) 插件
  5. CSS实现模拟漫画气泡对话效果
  6. CSS发光边框文本框效果
  7. jQuery Color Animate (jQuery 颜色变换动画) 插件
  8. 用Stylish美化你的Google+外观
  9. 修改 Chrome 默认的 Google 搜索域名
  10. Chrome的最强Google+扩展大集合
  11. 又优化了一下博客及外观
  12. 从各方面优化了一下博客
  13. 几个高级CSS属性技巧美化网站显示
  14. 开启Google两步验证和应用程序专用密码
  15. 巧解决Google时常中断的问题

如果没有声明的话，本文为NetS H原创，不过非常欢迎转载，本文链接:

Apple Mac风格Chrome滚动条


转载烦请您保留此链接。

分类: IT/计算机/Web - 实用/推荐/分享 - 网页设计/js/css
Tags: - - - - - - - - - - - - - - - -
1 九月 2011 at 15:09 - 评论 (17) 点击添加

17 条评论

  • 在 2011.09.01 16:11, 福州婚纱摄影 这样子说道:
    很好的东西啊 要学学

    [回复]

    []
    • 在 2011.09.01 21:20, 阿文 这样子说道:
      维基百科在百度怎么搜不到了？

      [回复]

      []
      • 在 2011.09.02 01:01, 烟气余热回收 这样子说道:
        个人博客 逛着逛着都快一点了都，明天还得早起 哎 睡觉去。 多多更新内容 -默为

        [回复]

        []
        • 在 2011.09.02 02:12, Yusky 这样子说道:
          感觉这个木有神马用~~

          [回复]

          []
          • 在 2011.09.02 10:21, 美白保湿品 这样子说道:
            维基百科好用不好用

            [回复]

            []
            • 在 2011.09.02 10:22, 青岛专业网站建设 这样子说道:
              百度百科我在用，那个维基百科倒是没用过

              [回复]

              []
              • 在 2011.09.03 23:30, 烟气余热回收 这样子说道:
                平时不怎么看电视剧的，这两天看中央一的 你是我的幸福 看迷了都。唉 网上没有 着急 –默为转转

                [回复]

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

                  [回复]

                  []
                  • 在 2011.09.09 12:37, clouder 这样子说道:
                    原来还可以这样

                    [回复]

                    []
                    • 在 2011.09.21 15:47, 韩国化妆品 这样子说道:
                      chrome有很多不好的问题比如兼容就很头疼。。有的网站打开就看不到正常的网站。。

                      [回复]

                      []
                      • 在 2011.09.25 00:31, Yusky 这样子说道:
                        只是来打酱油的。。。不怎么喜欢APPLE的风格

                        [回复]

                        []
                        • 在 2011.09.28 22:31, bedspreads 这样子说道:
                          回去弄我的

                          [回复]

                          []
                          • 在 2011.12.03 15:59, 长春短租房 这样子说道:
                            谢博主分享，支持一下！

                            [回复]

                            []
                            • 在 2012.01.13 12:42, 提金 这样子说道:
                              很好看，很实用

                              [回复]

                              []
                              • 在 2012.02.14 10:49, 横坐标 这样子说道:
                                支持一下

                                [回复]

                                []
                                • 在 2012.02.21 16:13, 励志故事 这样子说道:
                                  我是来做广告的，我自己认为值得一看的,欢迎回访哦

                                  [回复]

                                  []
                                  • 在 2013.05.15 23:02, criminal background check for free 这样子说道:
                                    Reid asked yourself if perhaps they must be searching for a health care provider or perhaps not to mention confronts border usa counterfeit attempting to get hold of banking account information and facts plus security passwords

                                    [回复]

                                    []
                                    (Required)
                                    (Required, will not be published)

                                    

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