使用-webkit-overflow-scrolling时的当前滚动位置:touch - Safari iOS javascript事件(scrollTop/scrollLeft)

Question

使用-webkit-overflow-scrolling时的当前滚动位置:touch - Safari iOS javascript事件(scrollTop/scrollLeft)

我正在使用-webkit-overflow-scrolling:touch来创建一个带溢出的div:scroll; 通过iOS触摸事件顺利滚动.

它工作得很好,除了它在滚动时似乎没有更新element.scrollTop或element.scrollLeft.它只更新element.scrollTop /当动量耗尽并停止时触发滚动事件.

有没有人知道找出当前滚动位置的方法,如果有可以收听的事件？我想知道是否可以通过CSS3属性找到它？谢谢

以下示例显示了两次尝试:

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

Run Code Online (Sandbox Code Playgroud)

============更新============

iOS 8已对此行为进行了排序.现在滚动时会触发滚动事件.

请注意,您现在必须在反弹滚动期间处理负滚动值.

Answer 1

pix*_*rer 10

在iOS开发人员库中,Safari指南中有一个解释:

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

基本上,滚动的事件流程如下:触摸/开始拖动(鼠标滚轮事件) - >平移/移动(无事件) - >停止(onscroll)

所以没有什么比连续事件的滚动被触发而平移发生在手势结束时只有onScroll.

如果你找到一种可选的方法来实现它,请告诉我:)

归档时间：	13 年，8 月前
查看次数：	29237 次
最近记录：	10 年，9 月前