iOS 5(safari)在“position:fixed”div上的HTML touch事件

我有一个位置:在滚动的网页固定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上面),它的作品…?!

看起来像一个Safari的bug。 你有同样的经历吗? 任何想法的解决方法? (Iscroll无疑 – 太慢了)

谢谢LC

我发现了一个相对奇怪的解决scheme,这个bug。 通过添加一个touchstart事件监听器和一个空白事件处理程序,似乎可以通过手动触摸移动触摸区域。 我不知道这是否是JavaScript滚动问题的解决scheme。

码:

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

信贷find这个方法去在这个github的bug讨论 pamelafox。

我有同样的问题。 这似乎是一个Z索引的问题,当divs以编程方式移动(animation等):固定位置的div不能正常工作,因为用户不会再次触摸滚动。 只有在最后一种情况下,div才能正确地重新计算。

我有这个问题。 我得到的方式是绑定到“点击”,而不是“touchstart”。

这意味着我的“点击”事件搞糟了(对于不在触摸设备上的用户),所以我首先检测到hover,然后使用hover来告诉我他们是否触摸用户。 有点肮脏,但它的作品!

我也发现了这个bug,但是下面的东西似乎为我清除了它:

 <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标题

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

此问题可能与其他已发布的几个解决方法有关。 在移动Safari浏览器上的固定定位实施是最好的。

固定位置导航栏只能在iOS5的Mobile Safari上单击一次

触摸事件检索pageX和pageY – 这意味着在“页面”上的位置。 如果页面向下滚动,则Y坐标增加,因此固定的元素将不可用,因为它们的y偏移值保持不变。 您可以通过这个计算来检查滚动页面上是否有一个固定的元素被触摸:

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

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