Mobile Safari에서 뷰포트 하단에 요소를 배치하는 방법은 무엇입니까?

모바일 Safari의 뷰포트 하단에 있는 위치 지정 요소

위치 사용과 같이 고정 위치 지정을 달성하기 위한 기존 접근 방식: 고정, Mobile Safari에서는 효과가 없는 것으로 입증되었습니다. 그러나 요소를 뷰포트에 효과적으로 고정하는 Gmail의 부동 메뉴 표시줄을 포함한 혁신적인 솔루션이 등장했습니다.

실행 가능한 접근 방식 중 하나는 JavaScript를 활용하여 실시간 스크롤 이벤트를 모니터링하는 것입니다. 스크롤 리스너를 활용하면 개발자는 사용자의 스크롤 동작에 따라 요소의 위치를 ​​동적으로 조정할 수 있습니다. 특히, 다음 스크립트를 사용하면 스크롤 시 페이지 하단에 특정 요소가 남아 있는지 확인할 수 있습니다.

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

이 코드 조각에서는 onscroll 이벤트 핸들러가 window 객체에 연결되어 있습니다. 스크롤 활동을 지속적으로 모니터링합니다. 스크롤 이벤트가 발생할 때마다 ID가 고정Div인 요소의 style.top 속성이 수정됩니다.

style.top에 할당된 값은 현재 세로 스크롤 위치(window.pageYOffset), 브라우저 창을 고려합니다. 높이(window.innerHeight) 및 25픽셀의 고정 오프셋입니다. 이 위치 지정 전략은 사용자가 스크롤할 때 요소가 페이지 하단에 위치를 유지하도록 보장하여 고정된 뷰포트 기준 효과를 생성합니다.

위 내용은 Mobile Safari에서 뷰포트 하단에 요소를 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!