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

摘要

通过加载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经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

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

目前评论:29   其中:访客  26   博主  3

    • avatar 黎叔 1

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

      • avatar MTnetwork 2

        终于放出来了 ,占个位

        • avatar Heiland 2

          已提交!

          • avatar 天网 0

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

            • avatar 码海导航 2

              体验不错

              • avatar 爱爱 2

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

                • avatar 消灭星星 3

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

                  • avatar Amoy 4

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

                      • avatar 知更鸟 Admin

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

                      • avatar DESTLIVE 5

                        滚动的时候有点缓慢。

                        • avatar 两天 6

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

                            • avatar 知更鸟 Admin

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

                            • avatar 加宝 2

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

                                • avatar 知更鸟 Admin

                                  @加宝 是什么浏览器?

                                    • avatar 加宝 2

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

                                  • avatar nszb 2

                                    感觉滚动怪怪的,不舒服

                                    • avatar Linux 平台试试?? 0

                                      试试你就知道……

                                      • avatar 购物生活好店品 3

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

                                        • avatar 艾薇资讯 3

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

                                          • avatar sxq345 1

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

                                            • avatar 在促销网 0

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

                                              • avatar 易中阳 0

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

                                                • avatar 同盟源 3

                                                  感觉好怪,不是很舒服

                                                  • avatar 林木木 2

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

                                                      • avatar robin 5

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

                                                      • avatar Flippy 2

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

                                                        • avatar 成长学 1

                                                          挺有个性。试验一下