為什麼在 Mobile Safari 中啟動虛擬鍵盤時固定導航會跳轉？

如何防止固定導航在虛擬鍵盤啟動期間跳轉

當虛擬鍵盤出現在Mobile Safari 中時，固定導航元素可能會出現意外行為。這可能會導致導航跳到頁面中間不理想的位置。

問題

當使用者遇到固定導航元素的位置突然發生變化時，他們專注於固定導航中的文字輸入字段，並出現虛擬鍵盤。當導航元素位於頁面底部時，這一點尤其明顯。

解決方案

要解決此錯誤，請考慮使用以下CSS 和JavaScript 程式碼:

CSS:

.header {
    position: fixed;
}

.footer {
    position: fixed;
}

.fixfixed .header,
.fixfixed .footer {
    position: absolute;
}

CSS:

JavaScript:

if ('ontouchstart' in window) {
    /* Cache DOM references */
    var $body = $('body');

    /* Bind events */
    $(document)
    .on('focus', 'input', function() {
        $body.addClass('fixfixed');
    })
    .on('blur', 'input', function() {
        $body.removeClass('fixfixed');
    });
}

透過將固定類別新增至主體輸入元素以獲得焦點並在輸入模糊時將其移除，您可以將固定元素切換為position:absolute，然後在需要時將其重設為position:fixed。此方案有效防止鍵盤啟動時導航元素跳轉。

以上是為什麼在 Mobile Safari 中啟動虛擬鍵盤時固定導航會跳轉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！