Touchscreen scroll disable

Question

For my work i have to create help file on a touchscreen application. Normally the page is scrollable by touch, which is fine, but now they asked me to create some movable popup, and the movement interferes with the scroll of the touchscreen. Is there a way to disable the scrolling of the background while the popup is on the screen?

I have seen the following post: Prevent Background Scrolling When Displaying Popup.

But the "$(window).scroll(function() { return false; });" doesn't seem to work for me.

My application works on the background with IE7..

The code i use now is as followed.

_overlay: function (status) {
    switch (status) {
        case 'show':
            $(window).scroll(function () {
                return false;
            });
            $.alerts._overlay('hide');
            $("BODY").append('<div id="popup_overlay"></div>');
            $("#popup_overlay").css({
                position: 'absolute',
                zIndex: 99998,
                top: '0px',
                left: '0px',
                width: '100%',
                height: $(document).height(),
                background: $.alerts.overlayColor,
                opacity: $.alerts.overlayOpacity
            });
            break;
        case 'hide':
            $(window).unbind('scroll');
            $("#popup_overlay").remove();
            break;
    }
},

This creates a overlay between the background and popup, but the background is still scrollable. Removing the scrollbar isn't really a solution, cause i use touch and swipe.

Answer 1

if you're using jQueryMobile use this code whenever you want to stop the page from scrolling:

$(document).bind('touchmove', function(e) {
    e.preventDefault();
});

and then use this code to let it scroll again:

$(document).unbind('touchmove');