Ipad 在iOS上使用webkit溢出滚动时,动量滚动期间访问的元素不正确

Ipad 在iOS上使用webkit溢出滚动时,动量滚动期间访问的元素不正确,ipad,ios6,webkit,Ipad,Ios6,Webkit,几天来一直使用webkit overflow scrolling touch。我正试图做一些非常直截了当的事情——但事实证明这很棘手 当我点击某个元素时,我想通过JS抓住它并用它做些事情。然而,当它出现在“webkit overflow scrolling:touch”div中时,一旦iOS的动量滚动接管,元素似乎就跟不上了。IE我开始滚动,当列表仍在滚动时,我点击一个,它似乎访问了一个不正确的元素?理想情况下,我想确定动量滚动何时开始,是否仍在进行中——轻触只是停止滚动,而不是一开始选择一个元

几天来一直使用webkit overflow scrolling touch。我正试图做一些非常直截了当的事情——但事实证明这很棘手

当我点击某个元素时,我想通过JS抓住它并用它做些事情。然而,当它出现在“webkit overflow scrolling:touch”div中时,一旦iOS的动量滚动接管,元素似乎就跟不上了。IE我开始滚动,当列表仍在滚动时,我点击一个,它似乎访问了一个不正确的元素?理想情况下,我想确定动量滚动何时开始,是否仍在进行中——轻触只是停止滚动,而不是一开始选择一个元素,但我甚至还不能让基本功能发挥作用

我正在iOS 6.01的iPad3上进行测试。只是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>

李{
高度:40px;
背景:#999;
}
  • 一,
  • 二,
  • 三,
  • 四,
  • 五,
  • 六,
  • 七,
  • 八,
  • 九,
  • 十,
  • 十一,
  • 十二,
  • 十三,
  • 十四,
  • 十五
  • 十六,
  • 十七,
  • 十八
  • 十九,
  • 二十
  • 二十一,
  • 二十二
  • 二十三
  • 二十四
  • 二十五
  • 二十六
  • 二十七
var elements=document.getElementsByTagName('li'); for(var i=0,len=elements.length;i
我也看到我的项目中出现了相当多的问题。这样的错误有时可以通过硬件加速滚动条内的元素来修复。试试看它是否适合你。以下是关于如何加速元素的更多信息:

在您发布这篇文章将近三年后,这里是如何解决这个问题的。首先,不要尝试控制动量滚动,一旦设备进入动量滚动(200ms),设备将停止向webview发送触摸事件

此代码在触发touchstartevent后附加touchend事件,并在150ms内将其删除,因此“点击”必须在150ms内触发

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);
});

希望这能有所帮助:)

我遇到了一个类似的问题,单击事件在错误的元素上触发-导致这个问题的原因是FastClick库。我最后添加了一个特例来禁用iPad上的FastClick。