모바일 Safari에서 스크롤 잠금 Div를 구현하는 방법은 무엇입니까?

Mobile Safari의 스크롤 잠금 Div

요소의 "position:fixed" 속성은 고정 위치 지정에 대한 일반적인 접근 방식이지만, 모바일 사파리에서는 한계가 있습니다. 그러나 메시지 보기에 부동 메뉴 표시줄을 표시하는 기발한 솔루션이 Gmail에서 나타났습니다.

이 기술에는 고정된 위치로 div를 생성하고 JavaScript의 window.onscroll 이벤트를 활용하여 스크롤 시 상단 속성을 업데이트하는 것이 포함됩니다. 작동 방식은 다음과 같습니다.

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

이 JavaScript 코드는 창의 스크롤 이벤트에 바인딩되어 "fixedDiv" 요소의 최상위 속성을 조정합니다. 계산을 통해 스크롤 위치에 관계없이 div가 페이지 하단에 유지됩니다.

이 접근 방식은 사용자가 콘텐츠를 스크롤하는 동안 화면에 지속되는 요소를 만들 때 특히 유용합니다. 부동 메뉴, 진행률 표시줄 또는 기타 대화형 구성 요소에 관계없이 이 기술은 Mobile Safari의 고정 위치 지정을 위한 안정적인 솔루션을 제공합니다.

위 내용은 모바일 Safari에서 스크롤 잠금 Div를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!