单击页面顶部时，防止 Mobile Safari 将地址栏滚动到视图中

Question

我有一个 web 应用程序，它在加载时执行 window.scrollTo(0, 1); 以隐藏正在工作的地址栏。

其中一个元素是一个固定位置为top: 0 的标题，使其保持在视口的最上方。在此标题上有一些可点击的按钮，当您尝试点击它们时，它不会执行操作，而是将地址栏滚动到视图中。 这是点击屏幕顶部 15-20 像素的默认 Safari 行为。

我试图捕捉点击并取消事件、取消冒泡、防止默认等。这些似乎都不起作用。

我尝试的代码是添加一个 id 为 test 的 div：

#test {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
}

document.getElementById("test").addEventListener("click", function (event) {
    event.preventDefault();
    event.stopPropagation();
}, false);

有什么想法吗？

Answer 1

我用它来防止手机上的默认设置：

https://github.com/alexblack/google-fastbutton

$('#your-button').fastClick(function(e) {
  e.preventDefault();

});

没有显示地址栏。用户体验也很整洁