如何在移动触摸屏设备上禁用滚动和重新启用滚动

时间:2013-07-21 07:17:46

标签: javascript jquery jquery-mobile mobile scroll

这不是一个问题,因为它是问题的解决方案。

很难找到一个解决方案,直到我偶然发现了一个响应稍微不同的问题的hallodom(How to disable scrolling temporarily?)添加的答案。

我想明确记录问题的答案。其他解决方案是最受欢迎的,并会增加对话。

hallodom的解决方案是:

对于移动设备,您需要处理touchmove事件:

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

取消绑定以重新启用滚动。在iOS6和Android 2.3.3中测试

$('body').unbind('touchmove')

我使用了hallodom的解决方案,只需将它们附加到我点击DOM中的对象时调用的函数:

    $('body').on('click', 'button', function(e){
        if($(this).prop('checked')){
             disable_scroll();
        }else{
             enable_scroll();
        }
    });

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

    function enable_scroll() {
        $('body').unbind('touchmove');
    }

1 个答案:

答案 0 :(得分:1)

试试这段代码:

var scroll = true

$(document).bind('touchmove', function(){
    scroll = false
}).unbind('touchmove', function(){
    scroll = true
})

$(window).scroll(function() {
    if ($('button').is(':checked') && scroll == false) {
        $(document).scrollTop(0);
    }
})