锚点在iOS Safari上滚动后失去点击能力

使用此来获取点击次数:

$("nav li a").click(function(event) { event.preventDefault(); target = $(this).attr("href").replace('#', ''); goToByScroll(target); }); 

这是滚动function:

 function goToByScroll(id) { $('html, body').animate({ scrollTop: $("#"+id).offset().top - totalHeight }, 'slow'); } 

第一次点击的作品,但之后,链接是不可点击/活动,除非手动滚动页面。 有任何想法吗?

在进一步调查iOS的人后,我们发现这是iOS5上Safari的一个bug。

我试过了

 // $('html,body').animate({ scrollTop: scrollto + 'px' }, 'slow') window.scroll(0,0); 

而且看到它实际上把固定头部画到了屏幕下方。 随着点击工作。

所以我把代码交换回来了,虽然它把头部正确地绘制在顶部,但是主动点击区域仍然在页面的更下方,尽pipe是不可见的,是可点击的。

似乎他们已经解决了在iOS6上testing。

我耗尽了各种CSS和DOM操作,删除和重新插入一个新的标题区…没有任何工作。

所以我99%肯定要发表这个答案。 大声笑。 虽然我意识到这并不能帮助你。

有很多因素可以在这里发挥作用,大多数不涉及你已经链接的代码。 点击不起作用:

  1. 点击事件正在被清除
  2. 您尝试点击的元素被另一个(可能是透明的)元素覆盖
  3. 元素的可点击区域被replace或格式不正确

对于第一个可能性是问题,您的元素将不得不保持不可刷直到刷新或直到您重新创build点击处理程序。 检查点击处理程序是否不是多次构build的。 您可以通过在调用$(element).click(function() { ... })设置断点或alert / console语句来完成此操作。

对于第二种可能性是这个问题,另一个元素将需要出现在可点击元素之上。 这可以通过使用浏览器或浏览器扩展来检查,使您可以右键单击要检查的元素。 如果被检查的元素不是你的可点击元素,这可能是问题。

对于第三种可能性是这个问题,你将不得不检查可点击元素的位置,大小和形状,而不可点击的元素。 使用浏览器或浏览器扩展程序select并突出显示页面上的元素。 看看它正在显示的位置,它具有什么尺寸, z-index计算的是什么,它具有什么样的显示属性( display: inline对引起可点击性的问题是臭名昭着的),如果它在当前是“真正的”视。

简而言之,你发布的代码几乎没有关于可能发生的事情,所以你需要做更多的debugging或者提供更多的代码。