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

知更鸟
知更鸟
知更鸟
1500
文章
6903
评论
2015年2月17日01:21:50 29 10.7K
摘要

通过加载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经验与技巧,关注前端设计与网站制作。仅用于功能演示。
修正 WordPress 密码设置链接错误 WordPress

修正 WordPress 密码设置链接错误

当用户注册或者忘记密码获取新密码时WordPress会自动向用户邮箱中发送一个验证链接地址,用户通过打开这个链接设置密码,不过经常发现这个链接直接打开后,并不是设置密码的正确链接。 修正 WordPr...
用字母替代图片脚本:LetterAvatar Plugins

用字母替代图片脚本:LetterAvatar

基于canvas,通过toDataURL动态生成base64图片。目前我主题的Gravatar头像,就是利用这个LetterAvatar脚本实现未设置Gravatar头像则读取ALT标签,自动生成首字...
批量替换WordPress自定义栏目值 WordPress

批量替换WordPress自定义栏目值

如果之前添加的自定义栏目值,比如附件或者图片链接地址变了,可以通过以下方法批量修改一下。 将下面代码添加到当前主题函数模板 functions.php 最后: global $wpdb; $wpdb-...
WordPress 主题添加花瓣飘落特效 WordPress

WordPress 主题添加花瓣飘落特效

上篇文章过年啦,挂灯笼!教大家在博客上挂个动画灯笼,可能大家认为很好玩,那就再分享一个花瓣飘落的特效,可以加到自己博客上再装点一下节日氛围。 点击下图查看动画效果 先贴一下代码,下面有打包的文件下载。...
匿名

发表评论

匿名网友 填写信息

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

评论: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

                                                          挺有个性。试验一下