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

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