嵌套元素中的 iOS Safari onscroll 事件答案

【问题标题】：iOS Safari onscroll event within nested element嵌套元素中的 iOS Safari onscroll 事件
【发布时间】：2012-02-15 05:16:50
【问题描述】：

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

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

使用 -webkit-overflow-scrolling 的问题在于，使用轻弹/一些力，div 会在你松开手指后继续滚动一点（即在ontouchend 被触发后） );这意味着我的 snap 在滚动完成之前计算。

我花了很长时间想方设法，但还没有成功。

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

如果没有，是否有可能

(a) 例如 ontouchmove 的访问速度，这样我就可以计算何时运行 snap？

或

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

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

【问题讨论】：

标签： javascript ios safari

【解决方案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 时。

【讨论】：

优秀；但是您知道为什么该事件在滚动期间可能会触发很多时间吗？您的示例有效，但在我更复杂的实现（更复杂的标记，css）中，事件在仍在滚动时触发。
更新：我有一些鼠标事件绑定到触摸事件，导致滚动多次触发。我的错，谢谢你的帮助。