가상 키보드를 사용하여 모바일 Safari에서 고정 요소가 점프하는 것을 방지하는 방법은 무엇입니까?

가상 키보드를 사용하는 모바일 Safari의 버그가 있는 고정 요소

Mobile Safari에서 고정 요소를 처리하는 것은 어려울 수 있으며, 특히 가상 키보드가 있는 경우에는 더욱 그렇습니다. 열립니다. 탐색 내의 입력 필드에 포커스가 있을 때 고정된 탐색 요소가 예기치 않게 점프하는 경우 일반적인 문제가 발생합니다.

원인 및 해결 방법

이 동작은 알려진 원인으로 인해 발생할 수 있습니다. 모바일 사파리에서 문제가 발생했습니다. 제안된 솔루션은 고정 요소의 위치를 ​​동적으로 변경하는 것입니다.

• 입력 요소에 포커스가 맞춰지고 가상 키보드가 나타나면 고정 요소의 위치 속성을 절대값으로 전환하세요.
• 입력 요소가 포커스를 잃고 키보드가 숨겨지면 원래 고정 위치를 복원합니다.

코드 조각

다음 코드 조각은 이 솔루션을 보여줍니다.

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

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');
    });
}

이 코드를 추가하면 사용자가 입력 필드와 상호 작용하고 가상 키보드가 나타나는 경우에도 탐색 요소가 페이지 하단에 고정된 상태로 유지됩니다.

위 내용은 가상 키보드를 사용하여 모바일 Safari에서 고정 요소가 점프하는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!