모바일 사파리에서 진정한 고정 포지셔닝을 달성하는 방법은 무엇입니까?

모바일 Safari에서 고정된 위치 요소

Mobile Safari에서 뷰포트를 기준으로 고정된 요소 위치를 지정하는 것은 반복되는 문제였습니다. 위치: 고정 속성이 원하는 효과를 제공하지 못하는 경우가 많지만 혁신적인 솔루션이 등장하고 있습니다.

JavaScript로 고정 위치 구현

Gmail은 최근 다음과 같은 기법을 도입했습니다. 고정 위치. JavaScript를 통해 캡처된 실시간 스크롤 이벤트를 활용하면 사용자가 스크롤할 때 페이지 하단에 요소를 고정할 수 있습니다. 이 솔루션은 효과적이고 효율적입니다.

이 기술을 구현하려면 다음 코드를 실행하세요.

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

이 코드는 다음을 기반으로 fixDiv라는 div 요소의 최상위 속성에 새 값을 할당합니다. 페이지의 스크롤 오프셋을 적용하여 스크롤과 상관없이 페이지가 하단에 고정되도록 합니다.

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