CODEWITHSUNDEEP
javascriptjqueryscrollmousewheel
Mattias Bregnballe
Mattias Bregnballe

Reputation: 101

Mouse Wheel Event and Scroll Event conflicting with eachother

My Problem is this:

I have a MouseWheel Event (from plugin: https://github.com/brandonaaron/jquery-mousewheel) that triggers a function:

$(document).on('mousewheel', onMouseWheel);

function onMouseWheel(event,delta)
{ Code... }

I Also have a Scroll Event that triggers another function:

$(document).on('scroll', onScroll);

function onScroll()
{ Code... }

However when using the mouswheel, both events are triggered and so both functions run, which I don't want them to. They have to be separate since using the mousewheel and dragging the scrollbar should give separate results. The problem only occurs that way around ie. the mousewheel function is not triggered by dragging the scrollbar.

EDIT:

I've realized with a little help, that the problem occurs because I use ScrollLeft() inside my mousewheel function, which of course causes the scroll event.

I've tried to think of a solution but with no luck. Can anyone help? Thanks!

EDIT: More code:

$(document).on('scroll', onScroll );

            function onScroll()
            {
                code...
            }


            $(document).on('mousewheel', onMouseWheel ) );

            function onMouseWheel(event,delta)
            {
                event.preventDefault(); 

                if(delta<0)
                {       
                    detectDown();       
                }

                else if(delta>0)
                {
                    detectUp();
                }

                return false;   
            }


            $(document).on("keydown", onKeyDown);

            function onKeyDown(e)
            {
                event.preventDefault();

                if (e.keyCode == 37) 
                { 
                    detectUp();
                }
                else if (e.keyCode == 39)
                {
                    detectDown();   
                }

            }


            function detectUp()
            {
                $("html, body").animate({scrollLeft:(currentElement.prev().position().left - 100)}, 800, 'easeOutQuad'); 
                currentElement = currentElement.prev();
            }

            function detectDown()
            {
                $("html, body").animate({scrollLeft:(currentElement.next().position().left - 100)}, 800, 'easeOutQuad'); 

            }

Maybe this helps?

Upvotes: 0

Views: 2692

Answers (2)

Mattias Bregnballe
Mattias Bregnballe

Reputation: 101

I've come to the realization, that the best solution is to make a custom scrollbar. This way we can avoid calling the scrolling function and having the different types of scrolling interfering with one another.

Upvotes: 0

Aur&#233;lien Gasser
Aur&#233;lien Gasser

Reputation: 3120

Add return false at the end of the onMouseWheel function.

function onMouseWheel(event, delta) {
  // code
  return false;
}

This will disable the default scroll action for the 'mousewheel' event, hence the 'scroll' event will not be triggered.

fiddle

Upvotes: 2

Related Questions