使用-webkit-overflow-scrolling时的当前滚动位置：touch - Safari iOS javascript事件（scrollTop / scrollLeft） [英] Current scroll position when using -webkit-overflow-scrolling:touch - Safari iOS javascript event (scrollTop / scrollLeft)
问题描述
我正在使用-webkit-overflow-scrolling：touch来创建一个带溢出的div：scroll;通过iOS触摸事件顺利滚动。
I'm using -webkit-overflow-scrolling:touch to make a div with overflow:scroll; scroll smoothly through iOS touch events.
它的工作非常出色，除了它在滚动时似乎没有更新element.scrollTop或element.scrollLeft。它只更新element.scrollTop /触发一个滚动事件，当动量耗尽并停止时。
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.
有没有人知道找出当前滚动位置的方法，如果有一个我可以听的活动吗？我想知道是否可以通过CSS3属性找到它？谢谢
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已对此行为进行了排序。现在滚动时会触发滚动事件。
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.
推荐答案
在iOS开发者库中，Safari指南中有关于它的说明：
In the iOS Developer Library, there is an explanation in the Safari guidelines about it:
基本上，滚动的事件流程如下：
touch / start dragging （鼠标滚轮事件） - >平移/移动（无事件） - >停止（滚动）
Basically, the event flow for the scrolling goes like this: touch/start dragging(mousewheel event)-> pan/movement(no events) -> stop(onscroll)
所以没有像平移发生时连续的滚动事件被触发在手势结束时只有一个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 :)
这篇关于使用-webkit-overflow-scrolling时的当前滚动位置：touch - Safari iOS javascript事件（scrollTop / scrollLeft）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
