Incorrect elements being accessed during momentum scroll using webkit-overflow-scrolling on iOS

Question

Been stuck with webkit-overflow-scrolling touch for a couple of days now. I'm trying to do something very straight forward - however it's proving tricky!

When I click on a certain element, I want to grab that by JS and do something with it. However when it's in a 'webkit-overflow-scrolling: touch' div, as soon as iOS's momentum scrolling takes over, the elements don't seem to keep up. IE I start scrolling, and while the list is still scrolling, I tap one and it it seems to access an incorrect element? Ideally, I want to identify when momentum scrolling has started, and if it's still in progress - a tap just stops it rather than selecting an element at first, but I can't even get the basics to work yet.

I am testing this on an iPad 3 with iOS 6.01. Just seems that the webkit scrolling is very buggy, as the onscroll event seems temperamental too and sometimes triggers at times other than the end of scrolling, unlike the universal iOS use.

If anyone has any ideas about how to get this behaviour working correctly, without using iScroll or turning webkit-overflow-scroll off, it would be greatly appreciated!

<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>

Answer 1

I have seen the momentum scrolling to be pretty buggy in my projects as well. Bugs like these are sometimes fixed by hardware accelerating the elements inside the scroller. Try that and see if it works for you. Here's more info on how to HW accelerate elements : http://davidwalsh.name/translate3d

Answer 2

Almost three years after you posted this, but here is how to approach this problem. Firstly don't try and control the momentum scroll, once the device has entered momentum scrolling (200ms), the device stops sending touch events to webview.

this code attaches a touchend event once the touchstartevent has fired, and removes it in 150ms, so the "tap" must fire within 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);
});

Hope this helps :)