如何使用 Modernizr 检测对即时滚动事件的支持？

Posted 2023-03-14

【中文标题】如何使用 Modernizr 检测对即时滚动事件的支持？

【英文标题】：How to detect support of immediate scroll events with Modernizr?

【发布时间】：2015-04-08 19:04:05

【问题描述】：

我使用 ScrollMagic 在网页的每个部分触发动画。这适用于桌面设备和移动设备上的某些浏览器。

但是，有些移动浏览器（旧版本的 Safari 和 Chrome（在 ipad 上））在滚动事件完成之前不会播放这些动画。我知道有办法解决这个问题。但是，我想在不受支持时简单地关闭这些动画。

有没有办法用 Modernizr 来检测？还是我必须针对特定的浏览器及其版本？

【参考方案1】：

您不会检测到视差动画。这不是浏览器功能，您可以使用浏览器功能来完成。

在这种情况下，您希望检测是否在滚动期间重新排列页面，或者它是否等到滚动事件触发之后。目前没有检测到这个，创建一个会很油腻。

我相信您所看到的是scroll 事件在您在某些浏览器上滚动时未触发的结果。我想不出用javascript来模拟这个的方法（触发滚动事件显然只会触发一个scroll事件，所以那里没有任何收获）。因此，我不确定您是否能够准确地检测到这一点。

【参考方案2】：

我完全同意Patrick's answer，但想补充一点，您所说的移动版 chrome 和 safari 确实可以立即滚动事件。

您所描述的问题与版本 8 之前的所有 ios 设备有关。 在此之前，移动浏览器引擎在滚动时不会触发“真正的”滚动事件，而只会在滚动完全停止时触发（所以在惯性停止之后）。甚至 javascript 的执行都被暂停了，所以你不能只运行一个循环来检查滚动位置。

长话短说：使用容器进行滚动和requestAnimationFrame. 我发现为 iOS8 之前的设备获取滚动事件的最简单方法是 iScroll。

我建议你看看这个：http://janpaepke.github.io/ScrollMagic/examples/advanced/mobile_basic.html 还有这个：http://janpaepke.github.io/ScrollMagic/examples/expert/mobile_advanced.html

所以回到你原来的问题：如何检测你什么时候甚至需要这些变通方法。 您需要检查您是否使用的是 iOS 7 或更低版本，据我所知，modernizr 无法做到这一点，因为它是一个功能检测库。

因此，请查看此主题以了解更多信息：Detect iOS version less than 5 with JavaScript