个性化滚动条,让页面更顺滑

WordPress2911.1K阅读模式
摘要通过加载jquery.nicescroll让滚动条变得很个性化,整个页面滚动更加顺滑,兼容所有的浏览器。

在阅读下面内容之前,可以先查看一下这个演示页面:

http://areaaperta.com/nicescroll/demo.html

是否发现查看演示页面时,浏览器滚动条与平时不一样,变得很个性化,而且感觉整个页面滚动时非常的顺滑,该特效是通过jquery.nicescroll实现,兼容所有浏览器。

使用方法很简单:

  1. <script src="jquery.nicescroll.js"></script>
  2.  $("html").niceScroll();
  3. $("#thisdiv").niceScroll({cursorcolor:"#00F"});
  4. $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});

其它参数,详见官网:http://areaaperta.com/nicescroll/

如果认为修改主题麻烦,该jquery脚本还有Wordpress的插件版,后台安装插件搜索:wp-nicescroll,使用效果相同,需要注意的是如果主题已加载jquery.js,请在插件设置中去掉include jquery勾选,以免产生冲突。

当然带来漂亮滚动的同时,需加载50KB的脚本文件,就看你的取舍了。

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
  • WordPress
  • JQuery
  • Wordpress教程
  • WordPress主题
评论  29  访客  26  作者  3
    • 黎叔
      黎叔 1

      begin主题好像滚动鼠标轮子不能滑动页面上下,,你试试

      • MTnetwork
        MTnetwork 2

        终于放出来了 ,占个位

        • Heiland
          Heiland 2

          已提交!

          • 天网
            天网 0

            祝鸟哥新年快乐,羊年发洋财!

            • 码海导航
              码海导航 2

              体验不错

              • 爱爱
                爱爱 2

                像我们写文章的时候,在文章发布框里面就有这种特效的感觉!不错,可以借鉴!

                • 消灭星星
                  消灭星星 3

                  交换友链 http://huanglv.me/p 消灭星星

                  • Amoy
                    Amoy 4

                    体验非常差。滚动鼠标轮子不能滑动页面上下

                      • 知更鸟
                        知更鸟

                        @ Amoy 阅读 486 只有你一个人说非常差….换个浏览器试试

                      • DESTLIVE
                        DESTLIVE 5

                        滚动的时候有点缓慢。

                        • 两天
                          两天 6

                          有hotnewspro里那种视频类文章形式me?

                            • 知更鸟
                              知更鸟

                              @ 两天 没有,因为暂时还无法在移动设备上实现响应式播放

                            • 加宝
                              加宝 2

                              鸟哥,你个性化滚动条之后,我的鼠标中轮滚动不了页面啦,必须要到滚动条那里用鼠标拉才能够动

                                • 知更鸟
                                  知更鸟

                                  @ 加宝 是什么浏览器?

                                    • 加宝
                                      加宝 2

                                      @ 知更鸟 我使用的是maxthon遨游浏览器,使用这个浏览器的IE内核浏览,滚动条可以使用鼠标中轮滚动,但是使用这个浏览器的兼容内核浏览,使用鼠标中轮滚动不了页面呢!谢谢

                                  • nszb
                                    nszb 2

                                    感觉滚动怪怪的,不舒服

                                    • Linux 平台试试??
                                      Linux 平台试试?? 0

                                      试试你就知道……

                                      • 购物生活好店品
                                        购物生活好店品 4

                                        主题非常漂亮,不过感觉不是很流畅往下拉的时候~

                                        • 艾薇资讯
                                          艾薇资讯 3

                                          滚动栏太小,往下拉太麻烦了,很不方便,观望中

                                          • sxq345
                                            sxq345 1

                                            太小了,一开始还以为浏览器出问题了

                                            • 在促销网
                                              在促销网 0

                                              鸟哥,你网站的滚动条太小了,很不方便啊,能改回来么? :cry:

                                              • 易中阳
                                                易中阳 0

                                                决定出手订购一套,已经打款,鸟哥查收,已加Q聊

                                                • 同盟源
                                                  同盟源 3

                                                  感觉好怪,不是很舒服

                                                  • 林木木
                                                    林木木 2

                                                    Mac 下滚动非常晕,返回前一页手势变成返回顶部了。。。

                                                      • robin
                                                        robin 5

                                                        @ 林木木 这个还真没在MAC上测试过,既然如此我先关了这个特效

                                                      • Flippy
                                                        Flippy 3

                                                        如何让文章页内的滑动条变成这种样式?

                                                        • 成长学
                                                          成长学 1

                                                          挺有个性。试验一下

                                                        匿名

                                                        发表评论

                                                        匿名网友
                                                        :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                                                        拖动滑块以完成验证