Question

我需要在点击时向用户显示div .overlay，并且用户必须无法滚动或移动该页面，除非他再次点击它并关闭它。

到目前为止，我已经尝试使用以下代码并且它可以正常工作

 $('#clicker').click(function() {

            $(".overlay").toggle();

            $('html').css('overflow', 'hidden');
            $('body').bind('touchmove', function(e) {
                e.preventDefault();
            });
        });

但问题是，当用户再次点击时，div消失但滚动丢失。

我需要添加以下代码才能正常运行......

 $('html').css('overflow', 'scroll');
 $('body').unbind('touchmove');

有人可以帮我解决如何取消绑定并在第二次点击时添加上面的js代码或切换？

Answer 1

如果在touchmove函数中添加条件，则可以检查div是否显示，并做出如下决定：

$('body').bind('touchmove', function(e) {
  if($(".overlay:visible").length) {
    e.preventDefault();
  }
});

Answer 2

您可以测试叠加层的可见性并执行相应的代码：

$('#clicker').click(function() {
    if ($(".overlay").toggle().is(':visible') {
        $('html').css('overflow', 'hidden');
        $('body').bind('touchmove', function(e) {
            e.preventDefault();
        });
    } else {
        $('html').css('overflow', 'scroll');
        $('body').unbind('touchmove');
    }
});

绑定和取消绑定以及切换

2 个答案: