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

知更鸟
知更鸟
知更鸟
1587
文章
6930
评论
2015年2月17日01:21:50 29 10.9K
摘要

通过加载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导出的XML文件 WordPress

分割WordPress导出的XML文件

用WordPress自带数据备份工具,可以导出xml格式的数据文件,如果导出的XML文件很大,受上传文件大小限制,无法导入时,可以用切割XML工具,将较大的xml文件分割成不同大小的文件,再分别导入。...
匿名

发表评论

匿名网友

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

评论:29   其中:访客  26   博主  3
    • 成长学 成长学 1

      挺有个性。试验一下

      • Flippy Flippy 3

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

        • 林木木 林木木 2

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

            • robin robin 5

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

            • 同盟源 同盟源 3

              感觉好怪,不是很舒服

              • 易中阳 易中阳 0

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

                • 在促销网 在促销网 0

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

                  • sxq345 sxq345 1

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

                    • 艾薇资讯 艾薇资讯 3

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

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

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

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

                          试试你就知道……

                          • nszb nszb 2

                            感觉滚动怪怪的,不舒服

                            • 加宝 加宝 2

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

                                • 知更鸟 知更鸟

                                  @ 加宝 是什么浏览器?

                                    • 加宝 加宝 2

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

                                  • 两天 两天 6

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

                                      • 知更鸟 知更鸟

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

                                      • DESTLIVE DESTLIVE 5

                                        滚动的时候有点缓慢。

                                        • Amoy Amoy 4

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

                                            • 知更鸟 知更鸟

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

                                            • 消灭星星 消灭星星 3

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

                                              • 爱爱 爱爱 2

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

                                                • 码海导航 码海导航 2

                                                  体验不错

                                                  • 天网 天网 0

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

                                                    • Heiland Heiland 2

                                                      已提交!

                                                      • MTnetwork MTnetwork 2

                                                        终于放出来了 ,占个位

                                                        • 黎叔 黎叔 1

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