Question

我的最终目标是在我的页面上有一个内联div，它本身水平滚动（使用-webkit-overflow-scrolling: touch）也可以捕捉。

我可以在没有 -webkit-overflow-scrolling的情况下实现此，因为我可以访问ontouchend事件，因此我可以在发生这种情况时计算我的快照，但要实现最佳效果这个功能的用户体验，我想在这个元素上使用类似原生的滚动。

使用-webkit-overflow-scrolling的问题在于，使用轻弹/某些力，div会在你的手指关闭后继续滚动一点（即ontouchend之后已解雇）;这意味着我的快照在滚动完成之前计算。

我花了很长时间试图找到方法，但我还没有成功。

在整个页面上下文中，当滚动完成时，safari会触发onscroll事件。我的问题是，是否可以在元素 的上下文中触发 ？即在<div id="slideShow">内点火？

如果没有，是否可以

（a）ontouchmove的访问速度，例如，我可以计算何时运行快照？

或

（b）模拟-webkit-overflow-scroll：touch（弹性和速度效果）。

注意：例如，使用带有iOS5的iPad。

Answer 1

scroll事件分别在每个滚动容器上触发，并且仅在滚动停止并且完成后才在iOS上触发。您只需在容器上侦听滚动事件即可。

以下是一个例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Test Touch Scrolling</title>
        <style>
            body {
                font-size: 15em;
            }
            #outer {
                height: 1200px;
                width: 300px;
                overflow-x: scroll;
                -webkit-overflow-scrolling: touch;
            }
            #inner {
                width: 600px;
            }
        </style>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var list = document.getElementById("outer");
                list.addEventListener("scroll", function(event) {
                    alert("Scroll has ended for element with ID '" + event.currentTarget.id + "'");
                });             
            }, false);
        </script>
    </head>
    <body>
        <div id="outer">
            <div id="inner">Some text. And more.</div>
        </div>
    </body>
</html>

只有在水平滚动文本时才会看到警报，而不是滚动out div时。

嵌套元素中的iOS Safari onscroll事件

1 个答案: