자바스크립트를 사용하여 스크롤 비활성화하기

예를 들어, 모달 팝업창을 구현하는 경우 팝업이 표시될 때 브라우저 창이 스크롤되는 것을 일시적으로 비활성화하고 싶은 경우가 있습니다. 이런 상황에서 다음과 같은 자바스크립트 함수를 활용할 수 있습니다.

자바스크립트를 사용하여 스크롤 비활성화하기

다음과 같은 JavaScript를 사용하여 브라우저 창이 스크롤되지 않도록 일시적으로 비활성화할 수 있습니다.

function disableScroll() {
    // Get the current page scroll position
    // 현재 페이지 스크롤 위치 가져오기
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  
        // if any scroll is attempted, set this to the previous value
        // 스크롤을 시도하면 이전 값으로 설정
        window.onscroll = function() {
            window.scrollTo(scrollLeft, scrollTop);
        };
}
  
function enableScroll() {
    window.onscroll = function() {};
}

출처: https://www.blogger.com/blog/posts/5555294442142074114?pli=1

위의 코드를 사용해보니 실제로 잘 작동하는 것 같습니다.

다른 방법으로 높이를 100%로 설정하고 overflow 속성을 hidden으로 설정하여 스크롤바를 비활성화하는 새로운 CSS 클래스를 생성하는 것도 가능합니다.

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

그런 다음, 아래와 같은 자바스크립트 함수를 사용하여 스크롤을 활성화/비활성화할 수 있습니다.

function disableScroll() {
    document.body.classList.add("stop-scrolling");
}
  
function enableScroll() {
    document.body.classList.remove("stop-scrolling");
}

이 방법은 테스트해보지는 않았습니다.

참고

https://avada.tistory.com/2873

티스토리에서 "쿠팡 방문하고 계속 읽기" 배너 표시하기

https://avada.tistory.com/2828

텍스트 입력 상자에 숫자와 하이픈만 입력 허용하기

https://avada.tistory.com/2824

CSS를 사용하여 하단 배너 만들기

 

자바스크립트 모달 팝업 (Javascript Modal Popup) - 워드프레스 정보꾸러미