Edge瀏覽器手機端軟鍵盤彈出后頁面滾動如何解決？

edge瀏覽器手機端軟鍵盤彈出導致頁面滾動問題的解決方案

使用手機edge瀏覽器時，點擊輸入框彈出軟鍵盤后，頁面會產生意外滾動，影響用戶體驗。本文提供一種有效方法解決此問題，防止頁面出現非預期滾動行為。

問題：簡單的頁面（例如，僅包含背景色和一個輸入框），在Edge瀏覽器中，初始狀態下全屏且不可滾動。但軟鍵盤彈出后，頁面背景高度不變，卻可上下滾動，出現滾動條。

解決方案：核心在于讓頁面在軟鍵盤彈出后自動調整高度并阻止滾動。方法是使用外層容器包裹輸入框。

1. 包裹輸入框： 使用
   元素（例如，class名為”frame”）包裹輸入框：

   <div class="frame">   <input type="text"> </div>

   2. 設置body樣式： 在css中設置body樣式：

   body {   overflow: hidden;   touch-action: manipulation; /* 或 auto */ }

   overflow: hidden; 隱藏超出容器內容，防止滾動。touch-action: manipulation; (或 auto) 允許正常的觸摸交互，避免阻止其他必要的觸摸操作，例如在輸入框內拖動選擇文本。

   3. 頁面高度自適應 (可選)： 為了使頁面高度在鍵盤彈出后自適應，可以在瀏覽器窗口大小改變時（resize事件）動態調整頁面高度，例如：

   window.addEventListener('resize', () => {   document.documentElement.style.height = `${window.visualViewport.height}px`; });

   注意：即使采取以上方法，在某些特定情況下（例如，在可滾動的輸入框內進行拖動操作），仍然可能出現意外滾動。這是更深層次的問題，目前尚未完全解決。

   通過以上步驟，可以有效地解決Edge瀏覽器手機端軟鍵盤彈出后頁面意外滾動的常見問題，提升用戶體驗。