鼠标滚轮平滑滚动？答案

【问题标题】：Smooth scrolling on mouse wheel?鼠标滚轮平滑滚动？
【发布时间】：2014-11-02 15:19:22
【问题描述】：

我想让它在现代浏览器中变得更慢、更流畅和尽可能一致，而不是正常的鼠标滚动速度。

我已经尝试过使用一些插件，例如 NiceScroll (https://nicescroll.areaaperta.com/)。

但安装后，由于某种原因，它会溢出：隐藏；在我的内容上，之后无法滚动任何地方。我不需要任何定制设计的滚动条。我只需要像这样使用鼠标滚动或垂直滚动条时滚动更流畅：

http://pervolo.com/

有人能告诉我这个吗？我计划使用 skrollr 插件 (https://github.com/Prinzhorn/skrollr) 以及平滑滚动。

【问题讨论】：

标签： javascript jquery plugins

【解决方案1】：

这可能会让你继续前进：

$(window).on('mousewheel DOMMouseScroll', function(e) {
  var dir,
      amt = 100;

  e.preventDefault();
  if(e.type === 'mousewheel') {
    dir = e.originalEvent.wheelDelta > 0 ? '-=' : '+=';
  }
  else {
    dir = e.originalEvent.detail < 0 ? '-=' : '+=';
  }      

  $('html, body').stop().animate({
    scrollTop: dir + amt
  },500, 'linear');
})

DOMMouseScroll 和 e.originalEvent.detail 对于 Firefox 是必需的。将amt 更改为您想要的滚动距离，并将500 更改为您想要的滚动速度。

小提琴：http://jsfiddle.net/utcsdyp1/1

【讨论】：

感谢您的回答。 :)
页面结束时出现一些错误 :( 特别是当速度小于 amt 时。
@mohsensolhnia，我尝试了不同的速度值和amt，但我没有看到任何错误。您能否从控制台中获取错误并告诉我您使用的是什么浏览器？
没有文本错误，但是当我使用笔记本电脑触摸板鼠标并且当我向下滚动到页面末尾时，我必须等待 30 或 40 秒再次接收我的命令（向上或向下滚动）。我设置 amd=30 和 speed=5，效果很好；D，但是另一个问题，当我使用真正的鼠标滚轮时非常慢 :( 你很清楚人们使用不同的鼠标滚轮速度。我认为，我们需要一个函数返回用户鼠标滚轮速度。我从不只在我的本地主机中使用你的 js，它必须在用户浏览器中起作用。
谢谢。我没有要测试的触摸板，但如果您找到解决方案，它可能对其他人有用。

【解决方案2】：

当用户使用$(element).on( "scroll", handler ) 滚动时，您可以捕捉到一个动作，然后，例如使用这段代码

$('html, body').animate({
    scrollTop: $("#target-element").offset().top
}, 1000);

使用 jQuery 滚动到某个元素

【讨论】：

我知道。我已经在使用我自己的代码版本了。我需要的是没有目标元素。如果您看过上面的网站：pervolo.com，我的意思是当使用鼠标滚动时，会有这种平滑的效果，而不是浏览器默认的跳跃效果。
您可以阻止页面滚动，而不是将文档滚动到一定数量的像素
我该怎么做呢？您能否编辑您的答案并让我知道它在 jquery 代码中的工作原理？谢谢。 :)

【解决方案3】：

我成功地让鼠标滚轮的滚动看起来像黄油一样光滑！复制粘贴以下 sn-p 并自己尝试。

let easeInOutQuint = t => t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t; // Easing function found at https://gist.github.com/gre/1650294

// With this attempt I tried to make the scroll by mouse wheel look smooth
let delay = ms => new Promise(res => setTimeout(res, ms));
let dy = 0;
window.addEventListener("wheel", async e => {

    // Prevent the default way to scroll the page
    e.preventDefault();

    dy += e.deltaY;
    let _dy = dy; // Store the value of "dy"
    await delay(150); // Wait for .15s

    // If the value hasn't changed during the delay, then scroll to "start + dy"
    if (_dy === dy) {
        let start = window.scrollY || window.pageYOffset;
        customScrollTo(start + dy, 600, easeInOutQuint);
        dy = 0;
    }
}, { passive: false });

function customScrollTo(to, duration, easingFunction) {
    let start = window.scrollY || window.pageYOffset;

    let time = Date.now();
    let timeElapsed = 0;

    let speed = (to - start) / duration;
    
    (function move() {

        if (timeElapsed > duration) {
            return;
        }

        timeElapsed = Date.now() - time;

        // Get the displacement of "y"
        let dy = speed * timeElapsed;
        let y = start + dy;

        // Map "y" into a range from 0 to 1
        let _y = (y - start) / (to - start);
        // Fit "_y" into a curve given by "easingFunction"
        _y = easingFunction(_y);
        // Expand "_y" into the original range
        y = start + (to - start) * _y;

        window.scrollTo(0, y);
        window.requestAnimationFrame(move);
    })();
}

【讨论】：