我正在使用 -webkit-overflow-scrolling:touch 制作一个带有 overflow:scroll 的 div;通过 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>
============更新============
iOS 8 已经对这种行为进行了排序。滚动事件现在在滚动时触发。
请注意,您现在必须在弹跳滚动期间处理负滚动值。
最佳答案
在iOS Developer Library中,Safari guidelines中有关于它的解释:
基本上,滚动的事件流是这样的: 触摸/开始拖动(鼠标滚轮事件)-> 平移/移动(无事件)-> 停止(滚动)
所以没有什么比在平移发生时触发滚动的连续事件更像手势结束时的 onScroll 了。
如果您找到实现该目标的可选方法,请告诉我:)
关于javascript - 使用-webkit-overflow-scrolling :touch - Safari iOS javascript event (scrollTop/scrollLeft) 时的当前滚动位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8546863/