심심한잉여의 잡동사니

[JavaScript/css] 팝업 시 스크롤 잠금/스크롤 락 방법 본문

코딩일기/자바스크립트

[JavaScript/css] 팝업 시 스크롤 잠금/스크롤 락 방법

심심한잉여 2022. 8. 19. 12:36
반응형
.scrollLock { 
overflow: hidden;
touch-action: none;
}

해당 CSS를 추가 하여 스크롤 혹은 터치를 막는 클래스를 만든다.

$('body').toggleClass('scrollLock')

제이쿼리를 통해 toggleClass를 활용 할 것이다.
해당 메소드를 사용하게 되면 클래스가 있다면 없애고 없다면 만드는 유용한 기능이다.
이를 통해 scrollLock 클래스를 제어하면 된다.
필자는 body에 해당 toggle클래스를 적용하여 본문의 스크롤을 잠가 팝업 시 밖에 있는 화면만 스크롤 안되게 막았었다.

반응형

'코딩일기 > 자바스크립트' 카테고리의 다른 글

[JS/JavaScript] 자바스크립트로 페이지 이동 시 스크롤 위치 조절하기  (0) 2023.03.17
[JavaScript/자바스크립트] 특수문자 체크 정규식  (1) 2022.08.18
[JavaScript]숫자 정규식  (0) 2022.08.17
[JavaScript]이벤트 루프란?  (0) 2022.04.27
[JavaScript]자바스크립트, JS 숫자인지 체크, isNaN() 함수  (0) 2022.04.22
'코딩일기/자바스크립트' Related Articles more