javascript - Catch mousewheel up or down with jQueryJS, without actually scrolling - Stack Overflow

admin管理员组

文章数量:1343311

I'm trying to catch whether the mousewheel is triggered and whether it's scrolled up or down without actually scrolling the page (body has an overflow: hidden).

Any idea's how I can achieve this using jQuery or pure javascript?

$(window).scroll(function(){
    if( /* scroll up */){ }
    else { /* scroll down */ }
});

I'm trying to catch whether the mousewheel is triggered and whether it's scrolled up or down without actually scrolling the page (body has an overflow: hidden).

Any idea's how I can achieve this using jQuery or pure javascript?

$(window).scroll(function(){
    if( /* scroll up */){ }
    else { /* scroll down */ }
});

• javascript
• jquery

Share Improve this question Follow asked Apr 15, 2015 at 14:24 Enzio RossaEnzio Rossa 12511 gold badge11 silver badge1111 bronze badges 4

• stackoverflow./a/8378946/3509874 – urbz Commented Apr 15, 2015 at 14:29
• possible duplicate of Catch scrolling event on overflow:hidden element – Rene Korss Commented Apr 15, 2015 at 14:35
• That possible "duplicate" question doesn't address how to prevent scrolling. – dgvid Commented Apr 15, 2015 at 16:51
• And it's a bit outdated. – Shikkediel Commented Apr 15, 2015 at 17:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I rarely promote plugins but this one is just excellent (and relatively small in size) :

https://plugins.jquery./mousewheel/

It'll allow to do something like this :

$(window).mousewheel(function(turn, delta) {

  if (delta == 1) // going up
  else // going down

  // all kinds of code

  return false;
});

http://codepen.io/anon/pen/YPmjym?editors=001

---

Update - at this point the mousewheel plugin could be replaced with the wheel event if legacy browsers need not be supported:

$(window).on('wheel', function(e) {

  var delta = e.originalEvent.deltaY;

  if (delta > 0) // going down
  else // going up

  return false;
});

This disables the scrolling.

NOTE: Notice it only stops scrolling if you hover over the element.

$('#container').hover(function() {
    $(document).bind('mousewheel DOMMouseScroll',function(){ 
       console.log('Scroll!'); 
       stopWheel(); 
    });
}, function() {
    $(document).unbind('mousewheel DOMMouseScroll');
});


function stopWheel(e){
    if(!e){ /* IE7, IE8, Chrome, Safari */ 
        e = window.event; 
    }
    if(e.preventDefault) { /* Chrome, Safari, Firefox */ 
        e.preventDefault(); 
    } 
    e.returnValue = false; /* IE7, IE8 */
}

Quoted from amosrivera's answer

EDIT: To check which way it is scrolling.

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

本文标签： javascriptCatch mousewheel up or down with jQueryJSwithout actually scrollingStack Overflow