如何使用 Ionic 手势事件获取滚动视图的坐标？答案

【问题标题】：How to get coordinates right of a scrolled view with Ionic gesture events?如何使用 Ionic 手势事件获取滚动视图的坐标？
【发布时间】：2015-11-16 18:24:08
【问题描述】：

我有一个带有一些 HTML 元素的 HTML 画布覆盖。当我在浏览器（Chrome 和 iOS Safari）中滚动视图时，我不能只获得正确的坐标。我查看了活动中心

pageX/Y，touches[0]的clientX/Y，pageX/Y，layerX/Y，screenX/Y

，以及它们的各种组合，但没有一个坐标似乎反映了滚动的偏移量。浏览器似乎可以正确处理它，因为绘图使用

pageX/Y 或 clientX/Y

被绘制到滚动关闭的区域，并且一旦向后滚动就会显示。

在 Ionic Github 发行版中，有一个测试用例 (test/html/gesture.html)。您可以看到相同的行为。在粉红色区域进行一些拖动，以便它在窗口之外生成相当多的内容。滚动到顶部和滚动到底部只需点击粉色区域的顶部，Y坐标会有很明显的差异，但它们几乎是一样的。

【问题讨论】：

您在寻找Element.scrollTop吗？
感谢马克西米利安的指点。 Element.scrollTop 适用于 Ionic 的测试。 “box”元素确实改变了 scrollTop 属性。但是它不适用于我的页面。在 Ionic 测试用例中，“box”元素包含一系列动态插入的
元素，而在我的例子中，画布和 HTML 覆盖都是容器元素的一部分。容器元素的css位置是“relative”，而canvas和overlay的css位置都是“absolute”。也许这就是原因？容器元素的 scrollTop 始终为 0。

标签： html angularjs canvas ionic

【解决方案1】：

我找到了解决方案。使用手势事件e（e.target 是我的画布）：

var rect = e.target.getBoundingClientRect();
var x = e.gesture.touches[0].clientX - rect.left;
var y = e.gesture.touches[0].clientY - rect.top;

实际上e.gesture.srcEvent.offsetX/Y 会给出坐标，但offsetX/Y 在 iPhone 上不可用

【讨论】：