Question

My page has a scrollable area which contains a number of elements. Each element triggers a function when hovered over.

My issue is that if the user scrolls up or down with their mousewheel, the function triggers for every element that the cursor passes over as the area scrolls by underneath.

Is there a way that I can have the function trigger on hover only if the user is not actively scrolling?

jQuery’s built-in .scroll() doesn’t seem to be what I need, since the scroll event is triggered only when a scroll starts. I need to know if the scroll is “in progress” so to speak.

---

UPDATE: Here’s my current code:

$container.find('div.item').each(function(i, e){
     $(e).hover(
          function(){
               $(this).toggleClass('expanded');
               // other functions here
          },
          function(){
               $(this).toggleClass('expanded');
          }
     );
});

So what I want to do is disable everything in .hover() if the user is currently scrolling the page.

Answer 1

I would use the setTimeout with a fair time on mouseenter and then clearTimeout on mouseleave, which would create an small delay on the hovers, so the hover only would trigger when the user holds his mouse over the element for the set time.

This would hopefully minimize your scrolling problem. There might be a better solution than this, but it was the first thing I thought of.

EDIT

Wrote this example quickly, should work fine:

$(function() {
    "use strict";
    var $container = $("#container"),
        timeout, self;

    $container.find("div").each(function() {
        $(this).hover(
            function() {
                self = this;
                timeout = setTimeout(function() {
                    $(self).css({
                        width : 500,
                        height: 500
                    });
                }, 500);
            },
            function() {
                clearTimeout(timeout);
                $(this).css({
                    width : 300,
                    height: 300
                });
            }
        );
    });
});

For a demo go to this fiddle: http://jsfiddle.net/sQVe/tVRwm/1/

It’s up to you how much of an delay you want, I used 500ms.

NOTE

The .each() is not needed, you could call the .hover() on the div collection right away. I included .each() because I don’t know if you want to do more than just binding the hover event.