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

Question

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

当网站用户选择其中一个单选按钮时，将触发一个 JS 函数来折叠单选按钮模块。与此同时，很多计算都在屏幕后面运行。

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

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

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

怎么做？

我的想法是：

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

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

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

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

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

提前致谢。

标签： javascriptjqueryhtmlcssdom

Answer 1

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