> 웹 프론트엔드 > CSS 튜토리얼 > 모바일 사파리에서 진정한 고정 포지셔닝을 달성하는 방법은 무엇입니까?

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

Barbara Streisand
풀어 주다: 2024-11-17 03:09:03
원래의
696명이 탐색했습니다.

How to Achieve True Fixed Positioning in Mobile Safari?

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

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

JavaScript로 고정 위치 구현

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

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

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};
로그인 후 복사

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿