인프런 커뮤니티 질문&답변

김혁_UX님의 프로필 이미지
김혁_UX

작성한 질문수

애플 웹사이트 인터랙션 클론!

아이폰 스크롤 관련 질문있습니다.

작성

·

286

0

아이폰에서는 스크롤을 내릴때는 상관 없지만 반대 방향으로 갈 경우 주소창이 나와 innerheight 가 달라지게 되는데요.
 
이때마다 height 가 다시 계산되는 것 같습니다. main-massage는 그때 처리를 해주셔서 height 가 달라져도 위치가 변하지 않는데, 뒤에 있는 이미지 시퀀스는 주소창이 올라올때마다 위치가 주소창 만큼 올라갑니다. 선생님이 주신 예제 파일에도 이와 같은 현상이 일어나고 있습니다.
 
문제의원인은 알았는데, 해결이 스스로 되지 않아 질문드립니다. 혹시 뒤에 이미지 시퀀스도 주소창에 따라 위치가 안변하게 조정할 수 있을까요?

답변 1

1

1분코딩님의 프로필 이미지
1분코딩
지식공유자

말씀대로 크기가 바뀌면서 창 높이의 영향을 받는 현상인데요, css에서 아래 부분의 top: 50%를 50vh로 바꾸어주시면 아마 해결 될거에요~ 이런 부분들은 OS 업데이트나 기기에 따라서도 영향을 받는거라서, 그때 그때 대응을 할 수 밖에 없는 것 같습니다.
.sticky-elem-canvas canvas {
    position: absolute;
    top: 50vh;
    left: 50%;
}

김혁_UX님의 프로필 이미지
김혁_UX

작성한 질문수

질문하기