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

时间:2013-01-03 14:55:50

标签: ipad ios6 webkit

现在已经坚持使用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>

2 个答案:

答案 0 :(得分:0)

我已经看到在我的项目中滚动的势头非常多了。像这样的错误有时会通过加速滚动条内部元素的硬件来修复。试试看,看看它是否适合你。以下是有关如何硬件加速元素的更多信息:http://davidwalsh.name/translate3d

答案 1 :(得分:0)

你发布这个差不多三年了,但这里是如何处理这个问题的。首先不要尝试控制动量滚动,一旦设备进入动量滚动(200ms),设备就会停止向webview发送触摸事件。

这个代码在touchstartevent触发后附加一个touchend事件,并在150ms内删除它,所以&#34;点击&#34;必须在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);
});

希望这会有所帮助:)