jquery垂直鼠标滚轮平滑滚动

Posted 2023-04-13

【中文标题】jquery垂直鼠标滚轮平滑滚动

【英文标题】：jquery vertical mousewheel smooth scrolling

【发布时间】：2013-02-01 01:58:01

【问题描述】：

我正在制作一个视差网站，我想用鼠标滚轮使页面滚动更流畅，以获得更好的用户体验。 我能得到的最好的例子是这个网站：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;
    )

谢谢！

编辑

我快到了。看看这个 fiddle：http://jsfiddle.net/gmelcul/cZuym/ 它只需要添加一个 easing 方法就可以滚动，就像密尔沃基警察网站一样。

【问题讨论】：

展示你迄今为止尝试过的东西——否则很难提出建议。

它确实需要缓和，它在 Firefox 和 Chrome 中有点生涩，但奇怪的是它在 IE10 中运行得非常好和流畅。

可能重复：***.com/questions/9142490/…

@gigimelcul 您能否发布您的整个解决方案（使用缓动方法）作为答案？我很乐意投赞成票，因为这看起来效果很好。

***.com/questions/20542586/…

【参考方案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/

【参考方案2】：

这里有两个 jsfiddles - 一个有脚本，一个没有脚本，以便您进行比较：

with script without script

javascript 使用 jQuery mousewheel plugin:

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

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

【讨论】：

您也可以使用箭头键使其滚动（使用箭头键和鼠标滚轮滚动会更加用户友好）。 jsfiddle.net/aVvQF/4

@DavidMartins 我也更喜欢没有它，但这不是问题:)。

【参考方案3】：

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

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

【讨论】：

这看起来很有希望。谢谢！

【参考方案4】：

嘿，我在这里找到了另一个非常简单易用的资源smoothwheel

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

【讨论】：

不幸的是，SmoothWheel 网站上的演示和您最后链接的“工作演示”在 Chrome 39 中根本不起作用。滚动仍然是移动***时的常规块跳转。另一方面，上面提到的“skrollr”库确实可以在 Chrome 39 中使用

【参考方案5】：

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

【讨论】：

它不仅仅是平滑滚动过程。它还为页面添加了一个不错的自定义滚动条。缺点：比其他更简单的平滑滚动实现要慢，而且尺寸也稍重。

一点都不流畅。当您滚动时，它会导致页面抖动。太可怕了！

链接坏了..这是最新的nicescroll.areaaperta.com