티스토리 뷰

프론트엔드

Mobile Safari에서 bounce scroll 방지

cs09g 2020. 9. 3. 09:51
반응형

iOS에서 엘리먼트가 의도치않게 위아래로 드래그가 가능한 현상이 있다. 단일 레이어일 경우 그러려니 하고 넘어갈 수 있지만, 메인 레이어를 덮는 오버레이가 있고, 이를 드래그 할 경우 그 아래 깔린 엘리먼트들이 노출되기 때문에 보기에 좋지 않다.

이를 방지하려면 아래와 같이 스타일을 설정하면 된다.

 

position: fixed 엘리먼트의 경우 현상이 발생하지 않으므로 우선 fixed로 설정을 해준다.

html,
body {
  position: fixed;
  overflow: hidden;
}

다음과 같이 최상위 래퍼를 두고,

<html>
…
<body>
  <div class="mainwrapper">
    …
  </div>
</body>
</html>

최상위 래퍼에 스크롤 옵션을 복구한다.

body > .mainwrapper {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* enables “momentum” (smooth) scrolling */
}

 

출처: https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/

반응형

'프론트엔드' 카테고리의 다른 글

[React] 이벤트 핸들러에서 this 사용하기  (0) 2020.10.27
iPhone Webview에서 Javascript 이벤트 발생 위치가 불일치하는 현상  (0) 2020.09.15
크롬 개발자도구 조건부 중단점 걸기  (0) 2020.06.15
nodejs 서버 실행 방법(직접, npm, pm2)  (0) 2020.06.11
[Webpack] devServer proxy 설정 + pathRewrite  (0) 2020.06.04
댓글