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

标签 javascript ios

我正在使用 -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中有关于它的解释:

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

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

所以没有什么比在平移发生时触发滚动的连续事件更像手势结束时的 onScroll 了。

如果您找到实现该目标的可选方法,请告诉我:)

关于javascript - 使用-webkit-overflow-scrolling :touch - Safari iOS javascript event (scrollTop/scrollLeft) 时的当前滚动位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8546863/

相关文章:

javascript - jQuery 不适用于动态生成的相同 div

javascript - 当 Angularjs 有很多表时,如何一次显示一张表?

php - 从复选框值中生成 URL。 mvc模式

ios - 如何知道用户是否在“设置”->“辅助功能”中禁用了透明度?

ios - 如何像 iOS "Contacts"应用程序一样显示搜索结果

objective-c - 如何使用 NSXMLParser 解析 XML 文件

javascript - WebRTC:如何将网络摄像头数据作为数据流获取?

javascript - 如何使用 React Suspense 更新 Redux Store

ios - 如何使用opencv将相机坐标转换为经纬度

objective-c - 在 Objective-C 开发中从 iOS 迁移到 Mac 时,NSIntegers 给出类型匹配错误