0
업데이트 : 상대적으로 배치 된 모든 요소가 포함 된 페이지를 다시 작성하고 페이지 ID를 통해 탐색 할 때 여전히 문제가 있습니다. 분명히 사파리 특유의 오버랩 충돌이라고 생각합니다. 그리고 그것은 짜증납니다. 거기에 어떤 아이디어가 있습니까?페이지가 제어 된 마이크로 사이트에서 스크롤이 깨졌습니다 - 데스크톱에서만 Safari
저는 전체 페이지 div를 탐색하기 위해 pageid를 사용하는 마이크로 사이트에서 오버 플로우가 숨겨진 상태로 세로로 정렬되어 있습니다. Safari의 데스크톱 버전을 제외한 모바일을 포함한 모든 브라우저에서 정상적으로 작동합니다.
페이지가 특정 pageid로 새로 고쳐지면 div가 스크롤되며 텍스트가 강조 표시되고 드래그 된 경우 스크롤되어 페이지 01에서 시작하여 02 페이지로 이동하면 (예 : 예상 한 것처럼) 콘텐츠가 스크롤되지 않습니다.
오버플로 충돌이있는 것 같지만 페이지 div가 가로로 스크롤하여 x 축 및 y 축 문제를 분리하려고 시도했지만 아무 것도 얻지 못했습니다. 저와 스크롤 사이에 투명 레이어가있는 것처럼 행동합니다 ...
여기에서 마이크로 사이트를 확인하십시오 : http://www.kevinjbeaty.com/trailtool-stackoverflow 다른 곳에서도 괜찮습니다.
이 기본 HTML입니다 :
<div class = "viewbox">
<div id= "page01" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
</div>
<div id= "page02" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
<div class="contentscroll">
**this is text that should scroll**
</div>
<div id= "page03" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
</div>
<div id= "page04" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
<div class="contentscroll">
**this is text that should scroll**
</div>
</div>
및 기본 CSS :
.viewbox {
position: relative;
height: 100%;
width: 100%;
display: block;
overflow: hidden;
background-color: black;
z-index:0;
}
.page {
position: relative;
height: 100%;
width: 100%;
display: block;
z-index:1;
overflow: scroll;
background-color: white;
z-index:10;
}
.content {
position: absolute;
padding: 2%;
background-size: contain;
background-repeat: no-repeat;
display: block;
}
.contentscroll {
position: absolute;
padding: 2%;
overflow-y: scroll;
overflow-x: hidden;
display: block;
z-index: 200;
}