.jpg)
手機(jī)edge瀏覽器軟鍵盤彈出導(dǎo)致頁(yè)面滾動(dòng)問(wèn)題及解決方案
使用手機(jī)edge瀏覽器時(shí)，輸入框彈出軟鍵盤后，頁(yè)面常常出現(xiàn)一個(gè)惱人的問(wèn)題：頁(yè)面高度不變，仍可上下滾動(dòng)，這與預(yù)期效果不符，尤其在頁(yè)面內(nèi)容超出屏幕時(shí)更為明顯。本文將分析此問(wèn)題并提供解決方案。
問(wèn)題簡(jiǎn)述：在一個(gè)簡(jiǎn)單的html頁(yè)面（包含一個(gè)輸入框）中，軟鍵盤彈出后，頁(yè)面未能自動(dòng)調(diào)整高度以匹配可視區(qū)域，而是保留原始高度，導(dǎo)致出現(xiàn)滾動(dòng)條并可滾動(dòng)超出屏幕內(nèi)容，影響用戶體驗(yàn)。
解決方案一：使用容器控制滾動(dòng)
通過(guò)css樣式和HTML結(jié)構(gòu)調(diào)整，可有效解決此問(wèn)題。方法是：用一個(gè)div容器包裹輸入框，并設(shè)置body的overflow屬性為hidden，同時(shí)設(shè)置touch-action屬性為none。
HTML代碼：
<div class="frame"> <input type="text"> </div>
CSS代碼：
body { overflow: hidden; touch-action: none; }
overflow: hidden 阻止body滾動(dòng)，touch-action: none 進(jìn)一步禁止觸摸滾動(dòng)。 .frame 容器則包含輸入框，確保輸入框區(qū)域可正常顯示和交互。
解決方案二：動(dòng)態(tài)調(diào)整頁(yè)面高度
更簡(jiǎn)潔的方案是利用瀏覽器窗口大小改變事件(resize)，動(dòng)態(tài)調(diào)整頁(yè)面高度。 在resize事件監(jiān)聽器中，將頁(yè)面高度設(shè)置為visualviewport.height，使頁(yè)面高度根據(jù)可視區(qū)域變化而調(diào)整。 這需要使用JavaScript實(shí)現(xiàn)。
然而，即使采用以上方法，在某些特殊情況下，例如輸入框本身允許滾動(dòng)，拖動(dòng)輸入框仍可能導(dǎo)致頁(yè)面滾動(dòng)。 這需要更深入的分析和更復(fù)雜的解決方案。
.png)
