IOS safari에서 새로고침(pull-to-refresh in iOS 15 Safari) 방지하는 법
화면의 중앙에 max-width 값을 주고 그 내부에서 스크롤을 하는 페이지를 IOS safari 에서 오픈했더니, 위 아래로 스크롤을 할 때마다 새로고침이 되는 이슈가 있었다.
해당 이슈에 대해 찾아보니 아래와 같은 방법을 찾을 수 있었다.
<body>
<div id="container"> Content </div>
</body>
body {
overflow: hidden;
}#container {
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}html 태그에 overflow: hidden 을 주고 스크롤이 되지 않도록 overscroll-behavior에 none 값을 준 뒤, 스크롤이 되어야 하는 부분에는 overflow-y : auto 속성을 부여하는 방식이었다.
이보다 조금 더 간단한 방법도 있다.
html {
overflow: hidden;
overscroll-behavior: none;
}위와 같이 적용을 했더니, 더이상 IOS safari에서 위 아래로 스크롤을 할 때마다 pull to refresh가 되지 않았다.
IOS safari에서 vh(viewport height) Error에 대응하기
"브라우저 크기에 맞게 100vh를 사용했을 때, 모바일에서 상하단에 위치한 url, navigation으로 인해 화면이 잘리는 현상이 발생한다."
✍🏻 출처 링크: iPhone CSS vh(viewport height) Error
위의 설명처럼 웹뷰의 height 값을 브라우저 크기에 맞게 100vh로 적용하였는데, IOS safari의 상하단에 위치한 navigation 바 때문에 화면의 하단이 잘리는 이슈가 있었다. 이를 해결하기 위해서는 브라우저 크기가 변할 때마다 vh 의 값을 다시 계산해줄 수 있도록 해야했다.
먼저, window.innerHeigth 값에 0.01을 곱하고,
let vh = window.innerHeight * 0.01;document의 Element 의 style에 setProperty를 이용해 새롭게 구한 vh값을 —-vh 변수에 담아준다.
document.documentElement.style.setProperty('--vh', vh + 'px');그리고 window가 resize 될 때마다(이벤트가 발생할 때마다) 해당 값을 다시 계산해주도록 했다.
window.addEventListener('resize', function () {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', vh + 'px');
});마지막으로 css 를 설정한다. body의 height 에 변수 --vh를calc() 식을 이용하여 값을 지정해준다. 특정 브라우저에서 --vh가 작동되지 않을 가능성이 있기 때문에 heigth 값을 추가적으로 100vh로 설정해준다.
body {
width: 100vw;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
나는 React를 사용하고 있었으므로, useEffect 안에서 해당 로직들을 전부 처리해주도록 했다.
적용한 방식 : jsx
React.useEffect(() => {
let vh = 0;
const setVh = () => {
vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
};
setVh();
window.addEventListener('resize', setVh);
return () => {
window.removeEventListener('resize', setVh);
};
}, []);
...
const Container = styled.div`
width: 100vw;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
`;⚡️ 참조
http://www.incodom.kr/iPhone_CSS_vh(viewport_height)_Error
https://stackoverflow.com/questions/69261011/disable-pull-to-refresh-in-ios-15-safari
https://www.the-koi.com/projects/how-to-disable-pull-to-refresh/
https://mong-blog.tistory.com/entry/CSSJS-vh-%EB%B2%84%EA%B7%B8-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95dvh-%EC%82%AC%EC%9A%A9%EB%B2%95-js-%EA%B3%84%EC%82%B0%EB%B2%95
