Detect mousewheel usage but keep the page scrolling (javascript/jquery)

Question

I need to detect a mousewheel usage, but when I add an event listener it stops the whole page from scrolling no matter how I fiddle with it. I've also tried using the mousewheel plugin from Brandon to no avail. I need something simple like this mock-up code:

User has used mousewheel: boolean=true

If boolean==true: execute code, then change boolean back to false until next mousewheel usage.

I'm new to this so don't go overboard with it, thanks.

So you want when a user uses the scroll button for the first time the page should keep scrolling. When they use it again, they should stop scrolling? — putvande, Aug 28 '13 at 10:58
No, I want a certain animation to trigger when the user uses the mousewheel that doesn't interfere with the scrolling of the page. — Stefan Keranov, Aug 28 '13 at 11:02
just out of curiosity... are you using a preventDefault in the listener? — pixshatterer, Nov 21 '13 at 17:57

score 0 · Answer 1 · edited Aug 21 '17 at 16:21

0

If your function returns false, depending on the JavaScript framework, the default behavior of scroll can be affected.

I would suggest to only trigger a custom event to listen to your scroll.

Something like this:

$(document).mousewheel(function(e){
   $(document).trigger('MyApp/ScollHappened', iCanPassValues); 
});

And a bit higher in your app, you can perform your calculations without interfering with the real scroll event.

$(document).on('MyApp/ScrollHappened', function(event, ...){
   //Doing my calculations
})

edited Aug 21 '17 at 16:21

Tot Zam

8,406
10
51
76

answered Aug 28 '13 at 10:59

Abdoul Sy

580
3
10

Won't that be triggered on any scroll events and not explicitly a mousewheel one ? – Stefan Keranov Aug 28 '13 at 11:05
You're right; But it doesn't change the underlying thing, the fact that it is good to put the behaviour of your apps outside custom function that depending on what returns change the behaviour of your page – Abdoul Sy Aug 28 '13 at 11:34
The page still doesn't scroll after I've put this in, the .mousewheel prevents it from doing so. We're back to stage 1 :( – Stefan Keranov Aug 28 '13 at 11:50

SuperMan · Answer 2 · 2013-08-28T11:30:32.927

I think you need something like that. Bare in mind that this will detect scroll with keyboard as well (down key). If you just want to detect scroll:

 $(window).scroll(function () {

        //scroll
 );

And if you want to defer between scroll up and down:

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

            }
            //upscroll
            else{

            }
        lastScrollTop = st;

    );

Sorry, my answer is not what you are looking for. Using the answer from Abdul Sy, but instead on scroll, look at this to bind mousewheel event - http://www.jquerysdk.com/api/event-mousewheel

Nope, I need just the mousewheel action. – Stefan Keranov Aug 28 '13 at 11:24 — Stefan Keranov, Aug 28 '13 at 11:24

Detect mousewheel usage but keep the page scrolling (javascript/jquery)

2 Answers2