如何在iOS 13中将DeviceOrientationControls与滚动一起使用？

Question

我正在尝试使用从DeviceOrientationEvents接收的数据，在three.js中使用three的DeviceOrientationControls设置相机的动画(旋转)。控件在每个动画帧上都会更新，一切都和我所期望的一样。但是，如果我开始滚动，那么在滚动的惯性完成之前，不会再次触发DeviceOrientationEvent。

通过从DeviceOrientationEvent处理程序中登录到控制台，我已经确认在滚动过程中不会触发(或者至少不会调度)这些事件。我可以看到事件有规律地触发，直到我开始滚动，然后停止，然后从滚动的惯性完成的那一刻开始继续触发。

手动停止中间滚动惯性(通过触摸屏幕)也会导致deviceorientation事件恢复。

我已经在我的脚本中禁用了所有其他scroll事件处理程序。我已经将所有的触摸事件处理程序都设置为被动的，也尝试将它们设置为非被动的，并且还尝试在我的脚本中完全禁用所有的触摸事件处理程序。

到目前为止，我相当确定这可能是滚动线程(独立于主线程操作)的处理和IMU数据的处理在浏览器中如何调度/排队的函数，因此可能没有好的解决方案，但我在这里询问，以防在我自己的故障排除中忽略了什么。这似乎不是three.js或three.js中的DeviceOrientationControls的问题，但我已经将它标记为three.js，以防有人在尝试类似的东西时遇到这个问题。

我在滚动时启用DeviceOrientationControls的独特情况是，scroll驱动“相机装置”(旋转和位置为动画的空对象)的动画，而移动手机会旋转相机本身。(这有点像在火车车厢里移动时能够转头环顾四周。)

我的测试是在装有iOS 13.5.1、Chrome iOS 84和Safari11专业版的IPhone上进行的。我还没有在Android上测试过。

Answer 1

多年来，iOS已经在滚动过程中减慢了重复的JavaScript功能。这是为了节省电池消耗，因为它必须在滚动时多次重新呈现页面，因此它会暂停其他辅助命令，直到滚动完成。See here for more。

你可以通过“touchstart”和“touchmove”捕捉垂直滑动手势，从而创建自己的自定义滚动功能，而无需实际向下滚动HTML页面。或者您可以使用像Hammer.js这样的库来帮助您。