[JS] 페이지 로딩시 스크롤 막는 방법

서근

2022. 9. 10. 08:52

QUOTE THE DAY

페이지 로딩 시 스크롤 막는 방법

페이지가 로딩될때 스크롤을 막아야 하는 경우가 있는데,
오늘은 로딩시 스크롤을 막는 방법에 대해 알아보겠습니다.

우선 Html의 body 부분의 스크롤을 막아주는 스타일을 입혀야 합니다.

CSS에 다음과 같이 코드를 추가해줍니다.

body.no-scroll {
    overflow: hidden !important
}

코드 네임의 .no-scroll은 사용자가 원하는 네임으로 변경해도 됩니다.

body에 .no-scroll이라는 class를 추가해주겠습니다.

<html lang="ko">
  <head></head>
  
  <body class=".no-scroll">
   
  </body>
   
</html>

body에 클래스를 추가해줬다면 이제 모든 페이지에서 스크롤이 작동되지 않습니다. 왜냐하면 CSS에 body의 overflow를 hidden으로 해줬기 때문이죠.

그렇기 때문에 페이지가 로드가 끝나면 body의 .no-scroll 클래스를 제거해줘야 합니다.

<body>가 시작하는 부분 최 상단에 아래 코드를 추가해주겠습니다.

<script>
  $(window).on("load", function() {
    document.body.classList.remove('no-scroll');
  });
</script>

<html lang="ko">
  <head>
         <!--이곳에 추가-->
  </head>
  
  <body class=".no-scroll">

  </body>
   
</html>

만약, 로딩 이미지와 함께 스크롤이 활성화 되야 한다면 setTimeout( ) 메소드를 사용하면 됩니다.

$(window).on('load', function() {
    setTimeout(function() {
        document.body.classList.remove('no-scroll');
    }, 300);
});

새로고침시 스크롤을 맨 위로 보내어 Refresh 하는 방법도 있습니다. 이 스크립트를 사용하면 웹 페이지가 스크롤 되기 전에 스크롤을 최 상단으로 보내고 Refresh를 시작하게 됩니다.

window.onbeforeunload = function() {
    window.scrollTo(0, 0);
};

위 코드를 모두 적용했다면, 페이지를 로딩 시켜보고 로딩이 완료되는 순간 스크롤이 되는 것을 확인해주기만 하면 됩니다.

참고로 이 코드는 로딩 이미지 등과 함께 사용하는 것이 사용자 입장에서 좋습니다.

오늘은 이렇게 페이지가 로딩될때 스크롤을 막는 방법에 대해 알아보았습니다.

읽어주셔서 감사합니다🤟

[JS] 로딩이 될때 요소의 텍스트를 변경하는 방법 (1)	2022.09.11
[JS] 애드센스 디스플레이 광고 반응형 광고 2개 삽입하는 방법 (2)	2022.09.11
[JS] 함수 Function (2)	2022.09.08
[JS] 내부링크를 현재 창으로 열도록 해주는 방법 (0)	2022.09.07
(JS) 이미지의 src를 변경하는 방법 (8)	2022.08.23