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

【问题标题】：Javascript: Disable iOS scroll-to-top when status bar is tappedJavascript：点击状态栏时禁用iOS滚动到顶部
【发布时间】：2013-05-20 06:40:55
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery ios mobile

【解决方案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

【讨论】：

我可以这样做，但我真的希望屏幕保持固定。它旨在模拟应用程序上的“共享”按钮，并带有一个可防止滚动的全屏灯箱。如果弹出“共享”灯箱，然后用户滚动到顶部，这会令人困惑——他们仍然共享同一个项目吗？
我用第二种可能的解决方案更新了我的答案。当我在我的 iPhone 上测试时它工作正常。