Question

我有一个位置：滚动网页上的固定div。

首先该事件有效，但当页面滚动时，当固定的div保持原位时，其“触摸”区域似乎发生变化（它似乎在滚动 - 除了在另一个div之上，或者取决于页面布局...）。如果滚动太多，最终不会再收到任何触摸事件。有时候底层div会收到事件。

以下是样本：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes" />

<style>
#fixed {
  position: fixed;
  width:200px;
  height:200px;
  z-index:1;
  background: rgba(100,0,0,0.5);
}

#scrolling {
  display: block;
  position: absolute;
  top: 100px;
  left: 100px;
  width:200px;
  height:999px;
  background: rgba(0,100,0,1);
}
</style>
</head>

<body>
  <div id="fixed"     ontouchend="alert('touch fixed')"></div>
  <div id="scrolling" ontouchend="alert('touch scrolling')"></div>
</body>

滚动时，触摸左侧的红色“固定”div，没有任何反应（无警报）。但是，在右侧（绿色滚动div上方）它可以工作......？！

对我来说，这似乎是一个Safari漏洞。你经历过同样的经历吗？有任何解决方法吗？（Iscroll是不可能的 - 太慢了）

谢谢你， LC

Answer 1

我找到了一个比较奇怪的解决方案。通过添加touchstart事件监听器和空白事件处理程序，它似乎以某种方式在手动触摸上移动触摸区域。我不知道这是否是JavaScript滚动问题的解决方案。

代码：

document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});

在this github bug discussion中找到此方法的信用是pamelafox。

Answer 2

我遇到了同样的问题。这似乎是一个z-index问题，当divs以编程方式移动时（带有动画等）：固定位置的div无法正常工作，因为用户不会再次触摸滚动。只有在最后一种情况下，div似乎才能正确重新计算。

Answer 3

我有这个问题。我绕过它的方式是绑定到“click”而不是“touchstart”。

这意味着我的“点击”事件搞砸了（对于不在触摸设备上的用户），所以我首先检测到悬停，然后使用悬停告诉我他们是否是触摸用户。有点脏，但它确实有效！

Answer 4

我也发现了这个错误，但下面似乎为我清除了它：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">`

将其添加到您的html标题

Answer 5

我使用固定位置导航遇到了同样的问题，该导航使用jQuery动画在页面上滚动用户。我不相信这是一个z指数问题。我发现当动画移动视口时，固定位置元素实际上仍然在前一个位置，直到用户触摸并移动屏幕。此时，导航的位置会更新。更多信息和演示：http://bit.ly/ios5fixedBug

Answer 6

此问题可能与发布了几个解决方法的其他问题有关。移动游猎的固定定位实施充其量只是半心半意。

Fixed position navbar only clickable once in Mobile Safari on iOS5

Answer 7

触摸事件检索pageX和pageY - 表示“页面”上的位置。如果页面向下滚动，则Y坐标会增加，因此固定元素将无法到达，因为它们的y偏移值保持不变。您可以通过此计算检查滚动页面上是否触摸了固定元素：

var finger = e.touches[0];
var yCalc = finger.pageY - window.pageYOffset;
var touchedElement = document.elementFromPoint(finger.pageX, yCalc);

如果你有水平滚动，你当然必须用x坐标做同样的事情。

IOS 5（safari）错误与“位置：固定”div上的HTML触摸事件

7 个答案: