JQuery enable and disable scrolling

Question

Hey guys I've got a problem with this jQuery code. Actually it works fine but i cant scroll with my scrollwheel after closing the div.

$(document).ready(function() {
    $("#add_item_inventory_toggle").click(function() {
        $("#add_item_inventory").fadeOut("fast");
        $("#add_item_inventory_toggle").hide();

        $('body').off('scroll mousewheel touchmove', function(e) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        });
    });

    $("#inventory_content_add_items").click(function() {
        $("#add_item_inventory").fadeIn("fast");
        $("#add_item_inventory_toggle").show();

        $('body').on('scroll mousewheel touchmove', function(e) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        });
    });
});

Solution

I believe your issue is this:

$('body').off('scroll mousewheel touchmove', function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});

which should be:

$('body').off('scroll mousewheel touchmove');

When you pass a function to off it attempts to find that specific function as a handler for those events on that element. But since you are passing an anonymous function in both cases, when using on and off they are two new instances of the function even though they both do the same thing. So it will never find the handler to remove. Somewhere behind the scenes imagine that both of those functions have a unique spot in memory, they are not pointing to the same spot since they are anonymous and defined in two areas. By not passing a function to off it will just remove any function attached to that element for those events.

Now if you did this:

$(document).ready(function() {
    $("#add_item_inventory_toggle").click(function() {
        $("#add_item_inventory").fadeOut("fast");
        $("#add_item_inventory_toggle").hide();

        $('body').off('scroll mousewheel touchmove', stopScrolling);
    });

    $("#inventory_content_add_items").click(function() {
        $("#add_item_inventory").fadeIn("fast");
        $("#add_item_inventory_toggle").show();

        $('body').on('scroll mousewheel touchmove', stopScrolling);
    });
});

function stopScrolling (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
}

It would work since we are passing the same function reference to both on and off.

Comments

[VeloFX]

thank you for you fast response, it works perfectly nice! :D