scroll-snap 사용시 주의 사항

new
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}

하위요소로 section 
section{  
  /* min-height: 600px; */
  /* height: 100svh; */
  height: 100vh;
  /* height: 100lvh; */
  /* height: 100dvh; */
  /* height: calc(var(--vh, 1vh) * 100);  */
  /* iOS Safari 대응 */
  position: relative;
}

height: 100dvh; <-- 이거 사용하지 마라, 역 스크롤시 화면이 들쭉 날쭉 해 지면서 떨리면서 스크롤이 이상하게 되거나 두번해야한다.
역 스크롤 시 주소창이 나타나는데 이 때 dvh 는 높이를 실시간으로 재 계산해서 높이를 가짐.
그래서 주소창이 스르르 나타날 때 높이가 재 계산 되면스 scroll snap 과 문제가 됨.
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
3.30
3.31
4.1
4.2
4.3
4.4
4.5
4.6
4.9
4.10
4.11
4.12
4.13
4.14
4.15
4.16
4.17
4.18
4.19
4.20
4.21
4.22
4.23
4.24
4.25
4.26
4.27
4.28
4.29
4.30
5.1
5.2
5.3