모바일 사파리에서 고정 위치를 얻는 방법은 무엇입니까?

Mobile Safari에서 위치 고정

Mobile Safari에서 뷰포트를 기준으로 고정된 요소의 위치를 ​​지정하는 것은 오랫동안 어려운 과제였습니다. 위치를 사용하는 전통적인 방법: 고정은 이 브라우저에서 종종 실패합니다.

대체 솔루션

Gmail은 최근 고정 위치의 근사값을 제공하는 혁신적인 솔루션을 도입했습니다. 비결은 스크롤 시 요소의 상단 위치를 동적으로 조정하는 것입니다.

JavaScript 구현

이 대체 방법은 몇 줄의 JavaScript만으로 구현할 수 있습니다.

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};

이 코드에서 onscroll 이벤트 리스너는 요소의 최상위 CSS 속성을 id="fixedDiv"로 업데이트합니다. 사용된 공식은 요소가 항상 25픽셀의 작은 오프셋으로 뷰포트 하단에 위치하도록 보장합니다.

스크롤 시 요소의 위치를 ​​지속적으로 조정함으로써 이 코드는 고정된 상태로 고정된 위치를 효과적으로 시뮬레이션합니다. Mobile Safari의 뷰포트로 이동하세요.

위 내용은 모바일 사파리에서 고정 위치를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!