在 Safari 浏览器上，通过 JavaScript 监视用户的滚动位置是很常见的需求之一。但是，在 iOS Safari 上，由于其特殊的滚动行为，这变得更加具有挑战性。
问题描述
在大多数浏览器中，可以通过监听 window 对象的 scroll 事件来获取当前的滚动位置。例如，以下代码将在页面滚动时打印出滚动距离：
window.addEventListener('scroll', () => {
console.log(window.scrollY);
});然而，在 iOS Safari 上，当用户在屏幕上进行快速滑动时，浏览器会暂停 JavaScript 的执行以提高滚动性能，导致 scroll 事件不会被触发。因此，如果你想要在 iOS Safari 上实时监测滚动位置，需要使用其他方法。
解决方案
1. 使用 touchmove 事件
在 iOS Safari 上，可以使用 touchmove 事件来模拟滚动事件。这个事件会在用户手指在屏幕上移动时触发，因此可以用来监控滚动行为。以下是一个示例代码：
-- -------------------- ---- -------
--- ------ - -----
--- ----- - -----
------------------------------------- ------- -- -
------ - -------------------------
---
------------------------------------ ------- -- -
----- - -------------------------
---
-------------- -- -
-- ------- --- ---- -- ----- --- ----- -
----------------- - --------
------ - ------
-
-- -----这个代码会在用户滚动时每隔 100 毫秒打印出滚动距离。其中，startY 和 lastY 分别表示滑动开始时和最后一次触发 touchmove 事件时的屏幕 Y 坐标。
2. 使用 window.requestAnimationFrame()
另一个监测 iOS Safari 滚动位置的方法是使用 window.requestAnimationFrame() 函数。这个函数会在浏览器下一次重绘之前调用指定的回调函数。因此，可以利用它来监测滚动位置变化。
-- -------------------- ---- -------
--- ------------ - --
-------- --------------- -
----- --------------- - ---------------
-- ---------------- --- ------------- -
-----------------------------
------------ - ----------------
-
--------------------------------------------
-
----------------这个代码会每次滚动时记录当前滚动位置，并且在位置变化时输出到控制台。由于 requestAnimationFrame() 的特性，这个代码不会阻塞主线程，因此对性能影响较小。
结论
在 iOS Safari 上监测滚动位置需要使用特殊的技术，但是通过 touchmove 事件或者 window.requestAnimationFrame() 函数，我们仍然可以实现这个功能。需要根据具体的需求选择适合自己的方法，在保证性能的同时实现监测滚动位置的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31447