search

Home  >  Q&A  >  body text

javascript - 网页实现平滑滚动效果

如题 我希望可以实现网页的一个平滑滚动的效果
例如这个网站http://tnc.org.cn/ 我不需要实现网页上的其他效果
只需要在鼠标滚动的时候 在windows下面不会随着鼠标滚轮一卡一卡的卷动
不知道 哪位大神有办法实现 或者有jquery的插件

天蓬老师天蓬老师2818 days ago542

reply all(4)I'll reply

  • 天蓬老师

    天蓬老师2017-04-10 14:58:57

    从http://tnc.org.cn/ 的plugin.js里面找到了这段代码,可以实现有惯性的页面滚动。

    //mousewheel
    ;(function($){var _=["DOMMouseScroll","mousewheel"];if($.event.fixHooks)for(var B=_.length;B;)$.event.fixHooks[_[--B]]=$.event.mouseHooks;$.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var $=_.length;$;)this.addEventListener(_[--$],A,false)}else this.onmousewheel=A},teardown:function(){if(this.removeEventListener){for(var $=_.length;$;)this.removeEventListener(_[--$],A,false)}else this.onmousewheel=null}};$.fn.extend({mousewheel:function($){return $?this.bind("mousewheel",$):this.trigger("mousewheel")},unmousewheel:function($){return this.unbind("mousewheel",$)}});function A(B){var _=B||window.event,A=[].slice.call(arguments,1),D=0,C=true,E=0,F=0;B=$.event.fix(_);B.type="mousewheel";if(_.wheelDelta)D=_.wheelDelta/120;if(_.detail)D=-_.detail/3;F=D;if(_.axis!==undefined&&_.axis===_.HORIZONTAL_AXIS){F=0;E=-1*D}if(_.wheelDeltaY!==undefined)F=_.wheelDeltaY/120;if(_.wheelDeltaX!==undefined)E=-1*_.wheelDeltaX/120;A.unshift(B,D,E,F);return($.event.dispatch||$.event.handle).apply(this,A)}})(jQuery);
    

    reply
    0
  • PHP中文网

    PHP中文网2017-04-10 14:58:57

    fullPage.js
    Demo: http://alvarotrigo.com/fullPage/#firstPage

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-10 14:58:57

    监听滚轮事件 然后滚动到一定距离 用jquery animate 实现平滑效果或者直接用css3 然后屏蔽原生滚动处理

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-10 14:58:57

    https://github.com/inuyaksa/jquery.nicescroll
    用这个jquery插件就好。。。。刚刚发现的

    reply
    0
  • Cancelreply