30

我正在制作一个视差网站，我想用鼠标滚轮使页面滚动更流畅，以获得更好的用户体验。我能得到的最好的例子是这个网站： 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/它只需要添加一个缓动方法来滚动，就像密尔沃基警察网站一样。

4

5 回答 5

18

我知道这是一个非常古老的帖子，但这是我提出的一个很好的解决方案：

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/

于 2016-03-03T14:46:16.267 回答
10

这里有两个 jsfiddles - 一个有脚本，一个没有它，所以你可以比较：

JavaScript 使用jQuery 鼠标滚轮插件：

$(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;
    })
});

比较两者。据我所知，脚本减慢了鼠标滚轮的速度，因此它需要更多的物理转动才能滚动与没有脚本相同的距离。由于滚动速度较慢，它可能会感觉更平滑（并且它可能确实更平滑，因为它可能在图形单元上更容易）。

于 2013-02-16T01:25:48.227 回答
4

嘿，我在这里得到了另一个资源，使用Smoothwheel非常简单

它可以在每个设备上的鼠标滚轮上实现流畅的滚动动画，并且可以完美运行！

于 2014-10-22T12:57:56.933 回答
4

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

var s = skrollr.init({
    smoothScrolling: true,
    smoothScrollingDuration: 1800
});
于 2013-07-29T19:16:02.590 回答
3

我找到了这个插件，它有一些不错的选择，适用于所有主要设备http://areaaperta.com/nicescroll/

于 2013-07-31T09:00:33.693 回答