通过JavaScript在移动版Safari中检测应用顶部的双击

Question

iOS有一个惯例,即双击顶部栏(即显示当前时间的位置)将应用程序滚动到顶部状态.例如,双击Safari中的顶栏会将您带到当前网页的顶部,并且在Facebook/Twitter中双击顶部会将您带到Feed的顶部.这是一个非常有用的导航快捷方式.

为了解决这个问题,我们称之为TopTap.

我想知道如何在移动Safari中的JavaScript应用程序中检测TopTaps - 也就是说,不是在iOS应用程序中,而是在移动Safari中正好查看的网页中.

在我的特定情况下,我不能依赖内置的移动Safari TopTap行为,因为我的文档由一个<canvas>实现其自己的可滚动界面的元素组成.我希望能够检测到TopTap,以便我可以<canvas>将其滚动到顶部状态.

我已经尝试添加一个onscroll事件处理程序,但是在那个事件中没有可以区分TopTaps的区别信息.此外,我无法使用触摸事件(touchstart等),因为TopTap发生在浏览器/ OS chrome中,超出了网页的范围.

有任何想法吗？

Answer 1

事实证明,双击本机状态栏将触发滚动事件document.body,您可以在其上实际收听.如你所说,诀窍是如何判断它是否来自双击？

为了检测它,身体必须向下滚动才能开始.并且设置滚动位置会导致滚动事件.

虽然它是一堆黑客,但我已经能够使这个工作:

基本上,你并没有真正使用它<body>作为容器.您将其设置为position: absolute全高/宽.然后,您将某种容器元素设置为position: fixed用作内容的实际容器.

这样做可以让您以编程方式滚动主体,而不会影响页面上的任何视觉效果.

现在你被设置为侦听身体上的滚动事件,理想情况下,除了通过双击状态栏之外,用户实际上不能在身体上滚动.

不幸的是,你必须做各种愚蠢的事情来使这项工作.

overflow-y: scroll; /* has to be scroll, not auto */ -webkit-overflow-scrolling: touch;

无论如何,这是:)

github repo中的更多信息,但无论如何,这对iOS 8来说似乎确实很有效(尚未测试其他版本的iOS).