DOM元素折叠时防止页面跳转

Question

假设我在一个网站页面上，有一个表单和一个单选，如下所示

当网站用户 select 这些单选按钮之一时，将触发 JS function 以折叠单选按钮模块。 与此同时，很多计算都在屏幕后面运行。

问题是，当网速较慢时，尤其是在移动设备上，选择单选按钮后，可能需要 5 秒甚至更长时间才能收起单选模块。

图片如下：我的用户单击一个单选按钮，模块正在后台运行计算，用户继续到表单部分，现在用户只能在手机上看到表单部分，此时，我的模块崩溃了。 用户会看到表单内容跳了起来，不再是他的观点。

我想要实现的是，用户对页面的视图保持不变，即使上面的模块崩溃，用户仍然应该留在他的位置，就像上面什么都没有发生一样。

怎么做？

我的想法是：

1. 当模块即将崩溃时，触发一个JS function。

2. JS function 应该能够在页面上标记当前用户的视点位置。

3. 然后，JS function 应该使视点保持在同一位置，尽管上面的内容会缩小或扩大。

4. JS function 应该可以在所有支持浏览器的移动设备上使用。

5. JS function 不应破坏可访问性。

提前致谢。

Answer 1

您可以使用element.getBoundingClientRect()方法获取屏幕上特定元素的 position，然后使用scrollBy方法将屏幕移动到该元素。

Answer 2

我认为你在这里有错误的计划。 用户不关心选择何时成功发送到服务器； 只有当网页成功接收到选择时。 也就是说，当用户选择一个选项时，模块应该立即折叠。

您的网站可以在模块折叠时将数据发送到服务器，甚至在模块完成折叠后； 用户不会在意。