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

Question

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

当网站用户选择这些单选按钮之一时，将触发JS功能以折叠单选按钮模块。同时，在屏幕后面进行了大量计算。

问题是，当网络速度较慢时（尤其是在移动设备上），选择单选按钮后，可能需要5秒钟或更长时间才能合上无线电模块。

对此图像进行成像：我的用户单击一个单选按钮，该模块在后台运行计算，用户继续到“表单”部分，现在用户仅在手机上看到“表单”部分，此时，我的模块崩溃了。用户将不再看到表单内容。

我想要实现的是，即使页面上方的模块折叠，用户的页面视图也保持不变，用户仍应停留在上面没有任何反应的地方。

该怎么做？

我的想法是：

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

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

3. 然后，尽管内容超出收缩或扩展范围，但JS函数仍应使视点保持在同一位置。

4. 应该在所有浏览器支持的移动设备上都使用JS函数。

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

谢谢。

Answer 1

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

Answer 2

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

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