javascript - 触摸屏滚动禁用

Question

对于我的工作，我必须在触摸屏应用程序上创建帮助文件。通常页面可以通过触摸滚动，这很好，但现在他们要我创建一些可移动的弹出窗口，移动会干扰触摸屏的滚动。当弹出窗口在屏幕上时，有没有办法禁用背景滚动？

我看过下面的帖子:Prevent Background Scrolling When Displaying Popup.

但是“$(window).scroll(function() { return false; });”似乎对我不起作用。

我的应用程序在 IE7 的后台运行..

我现在使用的代码如下。

_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;
    }
},

这会在背景和弹出窗口之间创建一个叠加层，但背景仍然可以滚动。删除滚动条并不是真正的解决方案，因为我使用触摸和滑动。

Answer 1

如果您使用的是 jQueryMobile，请在您想停止页面滚动时使用此代码:

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

然后使用这段代码让它再次滚动:

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