触摸屏滚动禁用

时间:2014-06-19 09:35:17

标签: javascript jquery alert touchscreen

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

我看过以下帖子:在显示弹出窗口时阻止背景滚动。

但“$(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;
    }
},

这会在背景和弹出窗口之间创建叠加层,但背景仍然可滚动。删除滚动条实际上​​不是解决方案,因为我使用触摸和滑动。

1 个答案:

答案 0 :(得分:2)

如果你正在使用jQueryMobile,只要你想阻止页面滚动就使用这段代码:

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

然后使用此代码再次滚动:

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