移動鍵盤打開/關閉時滯后

Question

我有一個使用原生 HTML、CSS 和 Javascript 制作的移動網站。

每當我點擊<input>時移動鍵盤打開/關閉時，該站點都會以非常滯后的方式自動向上/向下移動所有元素。

看看我在下面制作的這個 GIF：

為什么導致它如此滯后？

• 我的猜測是，每當網站更改視口時，它都必須移動很多導致延遲的元素。

如果有減少延遲的方法，有人可以請教嗎？ 有沒有辦法檢測視口變化，凍結元素然后將它們重置到原始位置而不自動逐漸向下移動？

Answer 1

@SunAwtCanvas，這是我使用@capacitor/keyboard 啟用以下事件偵聽器的解決方案。 首先，您可能想要收聽窗口事件：

window.addEventListener('keyboardWillShow', () => {
  console.log("Keyboard will Show");
});
window.addEventListener('keyboardDidShow', () => {
  console.log("Keyboard is Shown");
});

基於這些條件，為了手動控制視口滾動到屏幕底部，您可以添加element.scrollIntoView()方法，為其提供“false”參數，如下所示： element.scrollIntoView(false);

文檔：

1. 元素.scrollIntoView()

2. window.addEventListener('keyboardWillShow')

Answer 2

可以通過檢測視口更改和手動應用布局更改而不是依賴自動移動來減少延遲並優化體驗。 為此，您可以使用 JavaScript 事件偵聽器來偵聽窗口大小調整、方向更改或鍵盤顯示/隱藏等事件，以檢測視口中的更改並相應地更新布局。 您還可以利用 CSS 媒體查詢根據不同的屏幕尺寸指定不同的布局。 這樣您的代碼將更加靈活並針對不同類型的設備進行優化。