CSS 속성 {position:fixed;}이 최신 iOS 기기에서 작동하는 것처럼 보이지만 기기에 문제가 생길 수 있습니다.{position:relative;} 를 가끔 이유나 이유없이 수 있습니다. 일반적으로 캐시를 지우면 문제가 발생하고 문제가 다시 발생할 때까지 도움이됩니다.
특히, Apple 자체 에서 iPad 용 웹 컨텐츠 준비하기 :
iPad의 Safari 및 iPhone의 Safari에는 크기 조정 가능한 창이 없습니다. iPhone 및 iPad의 Safari에서 윈도우 크기는 화면 크기 (Safari 사용자 인터페이스 컨트롤 제외)로 설정되며 사용자가 변경할 수 없습니다. 웹 페이지를 이동하려면 사용자가 확대 또는 축소하기 위해 두 번 탭하거나 핀치하거나 확대 / 축소하기 위해 터치 및 드래그하여 뷰포트의 확대 / 축소 수준과 위치를 변경합니다. 사용자가 뷰포트의 확대 / 축소 레벨과 위치를 변경하면 고정 크기 (즉, 창)의 볼 수있는 컨텐츠 영역 내에서 그렇게합니다. 즉, 위치가 뷰포트에 "고정 된"웹 페이지 요소는 화면 밖에서 볼 수있는 컨텐츠 영역 외부로 끝날 수 있습니다.
아이러니 한 것은 안드로이드 기기에는이 문제가없는 것 같습니다. 또한 완전히 사용할 수 있습니다{position:absolute;} body 태그와 관련하여 문제가없는 경우 사용할 수 있습니다.
이 문제의 근본 원인을 찾았습니다. HTML 또는 BODY 태그와 함께 사용하면 스크롤 이벤트가 제대로 재생되지 않습니다. 때로는 이벤트를 시작하는 것을 좋아하지 않거나 스크롤 스윙 이벤트가 완료 될 때까지 기다려야합니다. 특히,이 이벤트가 끝나면 뷰포트가 다시 그려지고 고정 요소를 뷰포트의 다른 위치에 재배치 할 수 있습니다.
그래서 이것은 내가하는 일입니다 : ( 뷰포트를 사용 하지 말고 DOM을 고수하십시오! )
<html>
<style>
.fixed{
position:fixed;
/*you can set your other static attributes here too*/
/*like height and width, margin, etc.*/
}
.scrollableDiv{
position:relative;
overflow-y:scroll;
/*all children will scroll within this like the body normally would.*/
}
.viewportSizedBody{
position:relative;
overflow:hidden;
/*this will prevent the body page itself from scrolling.*/
}
</style>
<body class="viewportSizedBody">
<div id="myFixedContainer" class="fixed">
This part is fixed.
</div>
<div id="myScrollableBody" class="scrollableDiv">
This part is scrollable.
</div>
</body>
<script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
<script>
var theViewportHeight=$(window).height();
$('.viewportSizedBody').css('height',theViewportHeight);
$('#myScrollableBody').css('height',theViewportHeight);
</script>
</html>
본질적으로 이것은 BODY가 뷰포트의 크기이며 스크롤 할 수 없게 만듭니다. 스크롤 가능한 DIV 내부의 BODY는 BODY가 정상적으로하는 것처럼 스크롤합니다 (스윙 효과를 빼면 스크롤이 터치 엔드에서 멈춤). 고정 된 DIV는 간섭없이 고정 된 상태를 유지합니다.
참고로, z-index스크롤 가능한 DIV가 뒤에있는 것처럼 보이게하려면 고정 DIV에서 높은 값이 중요합니다. 나는 일반적으로 크로스 브라우저 및 대체 화면 해상도 호환성을 위해 창 크기 조정 및 스크롤 이벤트를 추가합니다.
다른 모든 방법이 실패하면 위의 코드는 고정 및 스크롤 가능 DIV 모두로 설정되어 작동 {position:absolute;}합니다.