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

我認為你在這里有錯誤的計划。 用戶不關心選擇何時成功發送到服務器； 只有當網頁成功接收到選擇時。 也就是說，當用戶選擇一個選項時，模塊應該立即折疊。

您的網站可以在模塊折疊時將數據發送到服務器，甚至在模塊完成折疊后； 用戶不會在意。