본문 바로가기 메뉴 바로가기

cs09g 블로그

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

cs09g 블로그

검색하기 폼
  • 분류 전체보기 (61)
    • Git (10)
    • Open source (2)
    • 프론트엔드 (16)
    • Javascript (15)
    • Mozilla (0)
    • 개발환경 (13)
      • Windows (4)
      • Linux (5)
      • Mac (3)
    • 생각 (3)
    • 여행 (1)
  • 방명록

bouncscroll (1)
Mobile Safari에서 bounce scroll 방지

iOS에서 엘리먼트가 의도치않게 위아래로 드래그가 가능한 현상이 있다. 단일 레이어일 경우 그러려니 하고 넘어갈 수 있지만, 메인 레이어를 덮는 오버레이가 있고, 이를 드래그 할 경우 그 아래 깔린 엘리먼트들이 노출되기 때문에 보기에 좋지 않다. 이를 방지하려면 아래와 같이 스타일을 설정하면 된다. position: fixed 엘리먼트의 경우 현상이 발생하지 않으므로 우선 fixed로 설정을 해준다. html, body { position: fixed; overflow: hidden; } 다음과 같이 최상위 래퍼를 두고, … … 최상위 래퍼에 스크롤 옵션을 복구한다. body > .mainwrapper { width: 100vw; height: 100vh; overflow-y: scroll; -webki..

프론트엔드 2020. 9. 3. 09:51
이전 1 다음
이전 다음
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
링크
  • Firefox
  • Mozilla Hacks Korea
TAG
  • fetch
  • bouncscroll
  • getter
  • 사이트성능측정
  • Windows
  • nodejs
  • git-checkout
  • bigsur
  • git-tag
  • GIT
  • setter
  • JavaScript
  • Karma
  • ubuntu
  • react
  • Mac
  • no_fcp
  • readStream
  • 크롬
  • Safari
  • testing
  • 리소스모니터
  • Android
  • csv-parser
  • abortcontroller
  • 블랙스크린
  • writeStream
  • event
  • ios
  • chrome
more

Blog is powered by Tistory / Designed by Tistory

티스토리툴바