在 iOS 上使用 webkit-overflow-scrolling 在动量滚动期间访问不正确的元素答案

【问题标题】：Incorrect elements being accessed during momentum scroll using webkit-overflow-scrolling on iOS在 iOS 上使用 webkit-overflow-scrolling 在动量滚动期间访问不正确的元素
【发布时间】：2012-12-17 22:55:41
【问题描述】：

现在被 webkit-overflow-scrolling touch 卡住了几天。我正在尝试做一些非常直接的事情 - 但事实证明这很棘手！

当我点击某个元素时，我想通过 JS 抓取它并对其进行处理。然而，当它在一个 'webkit-overflow-scrolling: touch' div 中时，一旦 iOS 的动量滚动接管，元素似乎就跟不上。 IE 我开始滚动，当列表仍在滚动时，我点击一个，它似乎访问了不正确的元素？理想情况下，我想确定动量滚动何时开始，以及它是否仍在进行中——点击只是停止它而不是一开始选择一个元素，但我什至还不能让基础工作。

我正在使用 iOS 6.01 的 iPad 3 上进行测试。只是似乎 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>

【问题讨论】：

我遇到了类似的问题，点击事件在错误的元素上触发 - 原因是 FastClick 库。我最终添加了一个特殊情况来禁用 iPad 上的 FastClick。

标签： ipad ios6 webkit

【解决方案1】：

我已经看到在我的项目中，动量滚动也非常糟糕。这些错误有时可以通过硬件加速滚动器内的元素来修复。试试看它是否适合你。以下是有关如何硬件加速元素的更多信息：http://davidwalsh.name/translate3d

【讨论】：

【解决方案2】：

在您发布此内容后将近三年，但这里是解决此问题的方法。首先不要尝试控制动量滚动，一旦设备进入动量滚动（200ms），设备就会停止向webview发送触摸事件。

此代码在 touchstartevent 触发后附加一个 touchend 事件，并在 150 毫秒内将其移除，因此“点击”必须在 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);
});

希望这会有所帮助:)

【讨论】：