在iOS上使用webkit-overflow-scrolling进行惯性滚动时访问了错误的元素。

Question

最近几天，我一直被 webkit-overflow-scrolling touch 折磨着。我的问题很简单 - 我想通过JS点击特定元素并对其进行操作。但是当它在 'webkit-overflow-scrolling: touch' 的 div 中时，一旦 iOS 的动量滚动接管，元素似乎就跟不上了。比如，当我开始滚动时，列表仍在滚动，我轻触其中一个元素，它却似乎访问了错误的元素？理想情况下，我想在动量滚动开始时识别，如果它仍在进行中，则轻触只会停止它而不是首先选择一个元素，但我甚至无法让基础工作正常运行。

我正在 iPad 3 上测试 iOS 6.01。看起来 webkit 滚动非常有问题，因为 onscroll 事件似乎也很难控制，并且有时会在滚动结束之外的时间触发，这与普遍使用的 iOS 不同。

如果有人有关于如何使此行为在不使用 iScroll 或关闭 webkit-overflow-scroll 的情况下正常工作的想法，将不胜感激！

<style>
li {
    height: 40px;
    background: #999;
}
</style>
<div style="-webkit-overflow-scrolling: touch; height: 400px; background: #CCC; width: 400px; overflow: scroll;" >
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
</ul>
</div>
<div id="content"></div>
<script>
var elements = document.getElementsByTagName('li');
for(var i = 0, len = elements.length; i < len; i++) {
    elements[i].ontouchstart = function (e) {
        document.getElementById('content').innerHTML = document.getElementById('content').innerHTML+this.innerHTML;
    }
}
</script>

- andybarnes

---

我也遇到过类似的问题，即点击事件错误地触发在其他元素上——原因是由于 FastClick 库。最终，我只能针对 iPad 添加一个特殊情况以禁用 FastClick。 - James

Answer 1

虽然您发布这篇文章已经将近三年了，但是以下是解决这个问题的方法。首先不要试图控制动量滚动，一旦设备进入动量滚动（200毫秒），设备就停止向Webview发送触摸事件。

此代码在触发touchstart事件后附加一个touchend事件，并在150毫秒内删除它，因此“tap”必须在150毫秒内触发。

element.addEventListener('touchstart', function(e)) {
    var target = this;
    var handler = function(evt) {
        e.preventDefault();
        e.stopImmediatePropagation();
        evt.preventDefault();
        evt.stopImmediatePropagation();
        /*
         Your tap event handler code here
         */
    };
    target.addEventListner('touchend', handler);
    setTimeout(function() {
        target.removeEventListener('touchend', handler)
    }, 150);
});

希望这能有所帮助 :)

- tnt-rox

Answer 2

我在我的项目中发现动量滚动非常的有问题。这些问题有时可以通过硬件加速滚动区域内部元素来修复。您可以尝试这个方法，看看是否适用于您的情况。以下是更多关于如何硬件加速元素的信息: http://davidwalsh.name/translate3d

- Trunal Bhanse