Javascript – Current scroll position when using -webkit-overflow-scrolling:touch – Safari iOS javascript event (scrollTop / scrollLeft)

iosjavascript

I'm using -webkit-overflow-scrolling:touch to make a div with overflow:scroll; scroll smoothly through iOS touch events.

It works brilliantly, except it doesn't seem to update element.scrollTop or element.scrollLeft while it's scrolling. It only updates element.scrollTop / triggers a scroll event when the momentum runs out and it stops.

Does anyone know of a way of finding out its current scroll position and if there's an event I can listen for? I wondered if it can be found through a CSS3 property perhaps? Thanks

Example below showing two attempts:

<!DOCTYPE html>
<body>
    <div id="display_a">Scroll is: 0</div>
    <div id="display_b">Scroll is: 0</div>  
    <div id="element" style="width:800px;overflow-x:scroll;-webkit-overflow-scrolling:touch;">
        <div style="font-size:100px;width:1850px;">
            a b c d e f g h i j k l m n o p q r s t u v w x y z
        </div>
    </div>
    <script>
        var e = document.getElementById("element");
        var display_a = document.getElementById("display_a");
        var display_b = document.getElementById("display_b");
        e.addEventListener("scroll",function(event){display_a.innerHTML = "Scroll is: " + event.target.scrollLeft;});
        setInterval(function(){display_b.innerHTML = "Scroll is: " +  e.scrollLeft;},100);
    </script>   
</body>
</html>

============ UPDATE ============

iOS 8 has sorted this behaviour. Scroll events are now triggered while scrolling.

Note that you'll now have to deal with negative scroll values during the bounce scroll.

Best Answer

In the iOS Developer Library, there is an explanation in the Safari guidelines about it:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Basically, the event flow for the scrolling goes like this: touch/start dragging(mousewheel event)-> pan/movement(no events) -> stop(onscroll)

So there is nothing like a continuous event of scrolling being triggered while the pan happens there just an onScroll at the end of the gesture.

If you find an optional way to accomplish that, let me know :)

Related Topic