導致原因:
是微信webview打開我們h5頁面的時候,就固定了頁面的高度,如果這個input在頁面的底部,當喚起軟鍵盤的時候,由於高度問題,整個webview會被鍵盤頂上去,,而取消的時候沒有恢復原狀。
解決辦法
第一種:失去焦點後自動置頂
inputLoseFocus() {
setTimeout(() => {
window.scrollTo(0, 0);
}, 100);
},
第二種:使scrollTo回到底部
inputLoseFocus() {
setTimeout(() => {
const scrollHeight = document.documentElement.scrollHeight
|| document.body.scrollHeight;
window.scrollTo({
top: scrollHeight,
behavior: 'smooth',
});
}, 100);
}
第三種:計算當前input距離頂部的高度,使頁面滾動到當前位置
inputLoseFocus() {
console.log(`window.pageYOffset: ${window.pageYOffset}`);
window.scrollTo({
top: window.pageYOffset,
behavior: 'smooth',
});
}