jquery vertical mousewheel smooth scrolling

Question

I'm making a parallax website and I would like to make the page scroll smoother with the mousewheel for a better user experience. The best example I could get was this website: http://www.milwaukeepolicenews.com/#menu=home-page It would be great if I could get something similar to that into my website, the smooth vertical scrolling and scroll inertia.

I noticed they are using Brandon Aaron's jQuery mousewheel which is very light but I'm just a beginner and cannot make it work by myself.

Also i noticed this in their 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;
    })

Thank you!

EDIT

I'm almost there. Take a look at this fiddle: http://jsfiddle.net/gmelcul/cZuym/ It only needs adding an easing method to scroll just like the Milwaukee Police website.

Show what you have tried so far - its hard to make suggestions otherwise. — , Feb 16 '13 at 01:19
It really needs easing, it's kinda jerky in Firefox and Chrome, but strangely it works extremely well and smooth in IE10. — gigi melcul, Feb 16 '13 at 03:57
Possible duplicate: http://stackoverflow.com/questions/9142490/smooth-scrolling-easing-effect-with-mouse-wheel?lq=1 — Anderson Green, Apr 02 '13 at 02:33
@gigimelcul Can you post your entire solution (with the easing method) as an answer? I'll be glad to vote up, since this appears to work quite well. — Cthulhu, Oct 04 '13 at 11:15
http://stackoverflow.com/questions/20542586/javascript-smooth-parallax-scrolling-with-mouse-wheel — Bembo, May 14 '14 at 15:48

score 18 · Answer 1 · answered Mar 03 '16 at 14:46

I know it's a really old post, but here is a good solution I made :

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

Test it : http://jsfiddle.net/y4swj2ts/3/

score 10 · Answer 2 · answered Feb 16 '13 at 01:25

Here are two jsfiddles -- one with the script and one without it so you can compare:

JavaScript using the 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;
    })
});

Compare the two. From what I can tell, the script slows the mouse wheel so it requires more physically turning to scroll the same distance as without the script. It may feel smoother because of that slower scrolling (and it may indeed be smoother as it is probably easier on the graphics unit).

You can make it scroll using arrow keys as well (and it would be more user-friendly to scroll using arrow keys as well as the mouse wheel). http://jsfiddle.net/aVvQF/4/ — Anderson Green, Apr 02 '13 at 02:39
@DavidMartins I prefer it without too but that wasn't the question :). — Cymen, Apr 21 '15 at 19:54

score 5 · Answer 3 · answered Jul 29 '13 at 19:16

5

Check out skrollr. It's a plugin to create the parallax effect. It has options when you initialize the plugin to toggle smooth scrolling:

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

answered Jul 29 '13 at 19:16

atomicrabbit

61
1
2

This looks promising. Thank you! – OMA Jan 18 '15 at 20:40

score 4 · Answer 4 · edited Oct 12 '17 at 10:46

4

hey I got another ressource here which is really simple to use smoothwheel

It enable a smooth scroll animation on mousewheel on every devices and work perfectly !

edited Oct 12 '17 at 10:46

neoDev

2,879
3
33
66

answered Oct 22 '14 at 12:57

GBM

41
1

Unfortunately, neither the demo at the SmoothWheel site nor the "working demo" you link at the end work at all in Chrome 39. The scrolling is still the regular block jump when moving the wheel a notch. The "skrollr" library mentioned above, on the other hand, does work in Chrome 39 – OMA Jan 18 '15 at 20:39

score 3 · Answer 5 · answered Jul 31 '13 at 09:00

3

I found this plugin, it has some nice options and works on all major devices http://areaaperta.com/nicescroll/

answered Jul 31 '13 at 09:00

iacobalin

523
2
9

It does more than just smoothening the scrolling process. It also adds a nice custom scrollbar to the page. Cons: slower than other simpler implementations for smooth-scrolling, and also a little heavier in size too. – BlackPanther Feb 06 '15 at 14:25
Not smooth at all. It causes the page to shake as you scroll. Absolutely horrible! – David Martins Apr 21 '15 at 15:56
link isbroken..here is the latest one https://nicescroll.areaaperta.com/ – Rajan Verma - Aarvy Jun 02 '21 at 15:04

jquery vertical mousewheel smooth scrolling

5 Answers5

Linked