jQuery垂直鼠标滚轮平滑滚动 [英] jquery vertical mousewheel smooth scrolling

问题描述

我正在制作一个视差网站，我想使用鼠标滚轮使页面滚动更流畅，以获得更好的用户体验. 我能得到的最好的例子是该网站: http://www.milwaukeepolicenews.com/#menu=home-page 如果能在我的网站中获得类似的内容，顺畅的垂直滚动和滚动惯性，那就太好了.

I'm making a parallax website and I would like to make the page scroll smoother with the mousewheel for a better user experience. The best example I could get was this website: http://www.milwaukeepolicenews.com/#menu=home-page It would be great if I could get something similar to that into my website, the smooth vertical scrolling and scroll inertia.

我注意到他们使用的是Brandon Aaron的jQuery鼠标滚轮，它非常轻巧，但是我只是一个初学者，不能自己使用它.

I noticed they are using Brandon Aaron's jQuery mousewheel which is very light but I'm just a beginner and cannot make it work by myself.

我也在他们的mpd-parallax.js中注意到了这一点:

Also i noticed this in their mpd-parallax.js:

jQuery(window).mousewheel(function(event, delta, deltaX, deltaY){
        if(delta < 0) page.scrollTop(page.scrollTop() + 65);
        else if(delta > 0) page.scrollTop(page.scrollTop() - 65);
        return false;
    })

谢谢！

编辑

我快到了.看看这个小提琴: http://jsfiddle.net/gmelcul/cZuym/只需向其中添加缓动方法滚动，就像密尔沃基警察网站一样.

I'm almost there. Take a look at this fiddle: http://jsfiddle.net/gmelcul/cZuym/ It only needs adding an easing method to scroll just like the Milwaukee Police website.

推荐答案

我知道这是一篇非常老的文章，但这是我提出的一个很好的解决方案:

I know it's a really old post, but here is a good solution I made :

function handle(delta) {
    var animationInterval = 20; //lower is faster
  var scrollSpeed = 20; //lower is faster

    if (end == null) {
    end = $(window).scrollTop();
  }
  end -= 20 * delta;
  goUp = delta > 0;

  if (interval == null) {
    interval = setInterval(function () {
      var scrollTop = $(window).scrollTop();
      var step = Math.round((end - scrollTop) / scrollSpeed);
      if (scrollTop <= 0 || 
          scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
          goUp && step > -1 || 
          !goUp && step < 1 ) {
        clearInterval(interval);
        interval = null;
        end = null;
      }
      $(window).scrollTop(scrollTop + step );
    }, animationInterval);
  }
}

对其进行测试: http://jsfiddle.net/y4swj2ts/3/

这篇关于jQuery垂直鼠标滚轮平滑滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！