[반응형] 모바일 환경에서 스크롤 방지, 모바일에서 url 창을 제외한 브라우저 크기의 vw , vh 만들기

문제점은 다음과 같았습니다.

채팅방 목록 페이지는 꽉 찬 화면에 스크롤없이 구현되어야했는데요.

다음 영상을 보면 뭐가 문제점인지 알 수 있습니다.

 

드래그가 생겨 UX 가 굉장히 안좋다는 것을 알 수 있었습니다..

 

우선 문제점을 해결하기 위해서 다음과 같은 방법을 사용했습니다.

블로그에서 다음과 같은 방법을 검색해서 사용하였는데요. 링크는 아래 참고자료 목록 자료1 으로 추가해놓았습니다. 

  const setScreenSize = () => {
    let vh = window.innerHeight * 0.01;
    console.log(vh);
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  };

 

자바스크립트에서 window.innerWidth, window.innerHeight 를 사용하는 것인데요.

위 메소드를 사용하면 현재 뷰포트의 크기를 알 수 있습니다.

(참고 - window.screen.width, window.screen.height는 OS의 해상도의 크기를 나타낸다고 합니다.)

 

이제 위 코드를 설명을 하자면 vh 라는 변수에 window.innerHeight 를 0.01을 곱하여 1% 로 만든 값을 할당하는 것이죠.

그럼 아래의 코드로 해당 변수를 css 사용자 지정속성 '--vh' 로 set 해주는 것입니다.

  document.documentElement.style.setProperty('--vh', `${vh}px`);

 

여기서 잠깐

왜 위처럼 해주어야할까요?

이유는 다음과 같습니다. 위처럼 css 변수를 할당하게 되면 root 에 해당 변수가 저장 된다고 할까요? 

자바스크립트에서 얻은 변수를 css 에서 사용할 수 있다는것에 큰 의미가 있는 것이죠.

:root {
  --vh : 30px;
}

 

다음과 같이 말입니다.

--vh 를 사용한 모습이죠.

원래는 var(--vh) 만 하여도 그 값을 사용할 수 있지만, 두번째 파라미터를 사용한 이유는 만약 자바스크립트에서 오류가 생겨 --vh 에 값이 할당되어있지 않은 경우 1vh 로 대체 하기 위한 옵션입니다. 넣어주어도 되고 안넣어주어도 되지만, 예상치못한 오류에 대비하기 위해선 넣어주는 것이 좋다고 생각합니다.

height: calc(var(--vh, 1vh) * 100);

 

그런데 문제점은 저렇게 하여도 스크롤은 사라지지 않았습니다. 엌엌 😱

특단의 조치를 취하기로 했습니다. 해당 검색자료는 또 참고자료2에 추가해놓았습니다.

 

useEffect를 사용해서 채팅 페이지로 이동할 경우 스크롤을 못하도록 하였습니다. 

코드는 다음과 같습니다.

scollLock이라는 css 클래스를 미리 만들어두고 바로 add 시켜버리는 방식으로 말이죠.

또한 해당 페이지를 빠져나갈때는 unmount를 해주는 것을 잊지않아야합니다. 다른 페이지에서도 스크롤이 안된다면 큰일이니까요.

 useEffect(() => {
    setScreenSize();
    const body = document.getElementsByTagName('body')[0];
    body.classList.add('scrollLock');

    return () => body.classList.remove('scrollLock');
  }, []);

 

scrollLock css 는 다음과 같습니다.

.scrollLock {
  overflow: hidden;
}

참고자료

참고자료1

https://blog.leehov.in/39?category=946474 

02. 모바일 100vh 스크롤 문제 해결하기

 

참고자료2

https://m.blog.naver.com/smilennv/221982624504

JavaScript :: 팝업 창 뒤에 스크롤 막기