이틀 고생한 IOS mobileWeb Scroll

step1. 아이폰의 UI는 어쨌든 HTML을 벗어나지 않으므로 html,body에 min-height 값을 준다.

 

  html,
  body {
    /* 배경 색상 지정 */
    background-color: black;
    /* 사파리 새로고침 막기 */
    overflow-x: hidden;
    /* overscroll-behavior: contain; */
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: -webkit-fill-available;
  }

 

 

step2.  상단 새로고침을 없애고 싶을때 

나는 overscroll-behavior: contain을 하라고 하지만 나는 졸라게 안먹음..Apple 포럼에서 찾음!  addEventListener으로 높이에 도달시 e.prevenDefault()을 먹임.

근데 나는 gsap로 스크롤을 주고 있는 상황이었는데 맨아래 닿으면 스크롤이 동작을 안함! 그래서 end + 2000을 고려하여 스크롤이 맨아래 즉 2000에 닿기 전에만 실행하도록 조건을 추가하였음 만약 그냥 새로고침만 없애고 싶다면 저 조건은 제외해도 될듯

  useEffect(() => {
    let Elem = sectionRef.current
    let startY = 0

    //터치가 맨위 일
    Elem?.addEventListener(
      'touchstart',
      function (e: any) {
        startY = e.changedTouches[0].pageY
      },
      false
    )

    Elem?.addEventListener(
      'touchmove',
      function (e: any) {
        var currentY = e.changedTouches[0].pageY
        if (sectionRef.current?.scrollTop! <= 0 && startY <= currentY) {
          if (currentY < 2000) {
            e.preventDefault()
            return false
          }
        }
      },
      false
    )
  })