Question

I am using the mousewheel in jquery to increase the number of a div, the number increases correctly but the scroll is not stopped in Firefox.

$(document).ready(function(){

    $('#test').bind('mousewheel DOMMouseScroll', function(event){

        var currentValue = parseInt($('#test').text(),10),
            newValue = currentValue + 1;

        $('#test').text(newValue);    
        event.preventDefault();
    });
});

Fiddle: http://jsfiddle.net/rHVUn/

The fiddle uses the standard mousewheel detection, but I have also used Brandon Aaron’s mousewheel plugin and it has the same problem.

Removing the line that updates the text (I have also tried html()) of the div resolves the issue, but this is a crucial part of the code and cannot be removed.

Does anyone know how to resolve this issue?

Thank you

Update: I have found the problem only occurs when my mouse is positioned directly over the text, if my mouse is within the box but not over the text (within the padding) the scroll is stopped

Answer 1

I have found a solution to my problem, it may not be the best way to do this but it works.

I found the problem only occurs when my mouse is positioned directly over the text during the scroll, so I added an overlaying element and use that as the mousewheel trigger.

Fiddle: http://jsfiddle.net/rHVUn/9/
(The background colour is not needed)