Question

我有一个网站，我希望在灯箱弹出时禁用所有滚动，然后在灯箱关闭时重新启用它。我有这个：

document.ontouchmove = function(e){
    if (stopScroll) {
        e.preventDefault();
    }
}

这适用于手动滚动，但用户仍然可以点击状态栏并进入页面顶部（现在灯箱不再居中，或者更糟糕的是，完全不在页面上）。我正在使用JQuery Mobile。如何在iOS中暂时禁用此功能？

Answer 1

我不相信这是可能的。更好的解决方案是通过将灯箱位置更改为固定而不是绝对来防止灯箱在滚动时中断：

</style>
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  background:#ccc;
  width:100px;
  height:100px;
}
</style>
<div class="centered">I won't scroll off page</div>

另一种选择是检查滚动事件并恢复原始位置：

$('.show_popup').on('click', function(){
    var position= $(window).scrollTop(); // save pos        
    // show popup    
    $(window).scroll(function(){
        $(window).scrollTop(position); // restore pos on scroll
    });
});

$('.hide_popup').on('click', function(){
    $(window).off(); // remove handler
});

示例：jsFiddle

Javascript：点击状态栏时禁用iOS滚动到顶部

1 个答案: