在鼠标滚轮上平滑滚动？

Question

Instead of the normal mouse scroll speed, I'd like to make it slower and smoother and as consistent as it can in modern browsers.

I have already tried using a few plugins like NiceScroll ( https://nicescroll.areaaperta.com/ ).

But after installing it, for some reason it puts an overflow: hidden; on my content and can't scroll anywhere after. I don't need any custom-designed scrollbars. I just need the scrolling to be smoother when using the mouse scroll or vertical scroll bar like this:

http://pervolo.com/

Would anyone please enlighten me about this? I plan to use the skrollr plugin ( https://github.com/Prinzhorn/skrollr ) along with the smooth scrolling.

Answer 1

This may get you going:

$(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 and e.originalEvent.detail are required for Firefox. Change amt to be your desired scroll distance, and change 500 to be your desired scroll speed.

Fiddle: http://jsfiddle.net/utcsdyp1/1

Answer 2

You can catch an action when user scrolls using $(element).on( "scroll", handler ) , then, using, for example this code

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

scroll to some element using jQuery

Answer 3

I succeeded in making the scroll by mouse wheel look smooth as butter! Copy-paste the following snippet and try yourself.

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