jquery垂直鼠标滚轮平滑滚动

Question

我正在创建一个视差网站,我想用鼠标滚轮使页面滚动更顺畅,以获得更好的用户体验.我能得到的最好的例子是这个网站:http://www.milwaukeepolicenews.com/#menu=home-page 如果我可以在我的网站上获得类似的东西,平滑的垂直滚动和滚动惯性,那将是很棒的.

我注意到他们正在使用Brandon Aaron的jQuery鼠标滚轮,它很轻,但我只是一个初学者,不能让它自己工作.

我也注意到他们的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/它只需要添加一个缓动方法来滚动,就像密尔沃基警察网站一样.

Answer 1

我知道这是一个非常古老的帖子,但这是我做的一个很好的解决方案:

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/

Answer 2

这里有两个jsfiddles - 一个带有脚本,一个没有它,所以你可以比较:

• 用脚本
• 没有脚本

使用jQuery mousewheel插件的 JavaScript :

$(document).ready(function() {
    var page = $('#content');  // set to the main content of the page   
    $(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;
    })
});

比较两者.据我所知,脚本会减慢鼠标滚轮的速度,因此需要更多的物理转动来滚动相同的距离,而不需要脚本.由于滚动速度较慢,它可能会感觉更平滑(并且它可能确实更平滑,因为它可能更容易在图形单元上).

Answer 3

查看skrollr。这是一个创建视差效果的插件。当您初始化插件以切换平滑滚动时，它有选项：

var s = skrollr.init({
    smoothScrolling: true,
    smoothScrollingDuration: 1800
});