body-scroll-lock
modal, lightbox / flyouts / nav-menu 등의 요소에서 스크롤을 유지하면서 부모요소인 본문의 스크롤을 비활성화 시켜주는 js 라이브러리 입니다.
iOS, 데스크탑 Safari 등에서도 지원되며, Vanilla JavaScript / React / Angular / VueJs 등의 프레임 워크에서도 작동합니다.
공식 사이트
※ 아래 내용 외 더욱 자세한 내용은 모두 이곳에.
사용 방법
공식 사이트에 각 프레임워크별 사용 예제가 포함되어있지만, 보기쉽게 한글로 간단히 정리해 보자면
Vanilla JS 기준
(1) 해당 Github 페이지에서 js 라이브러리를 다운 받습니다.
해당 js는 lib폴더 안에 있습니다.
(2) 다운 받은 js 파일을 연결해줍니다.
<head>
...
<script src="./bodyScrollLock.js"></script>
...
</head>
(3) 자바스크립트에서 다음 4가지를 필요에 따라 지정해 줍니다.
1. 스크롤을 유지하기위한 대상 요소(모달창 등)를 targetElement로 지정합니다.
const targetElement = document.querySelector('대상요소');
2. 대상 요소를 표시한 후 이벤트 핸들러를 통해 부모요소의 스크롤을 비활성화 하는 코드를 삽입해 줍니다.
bodyScrollLock.disableBodyScroll(targetElement);예를들어 다음과 같이 버튼을 클릭했을때 해당 요소(모달 등)는 액티브 클래스가 추가되며,
부모 요소는 스크롤이 비활성화 되게 하는 식입니다.
document.querySelector('.button').addEventListener('click',function(){
targetElement.classList.add('active')
bodyScrollLock.disableBodyScroll(targetElement);
})
3. 대상 요소를 숨긴 후 이벤트 핸들러를 통해 부모 요소의 스크롤을 다시 활성화 해주는 코드를 삽입합니다.
팝업창의 닫기 버튼 같은곳에 넣어주면 되겠네요.
bodyScrollLock.enableBodyScroll(targetElement);
4. 여러 대상 요소가 스크롤을 비활성화 하고 있거나, 한번에 모든 비활성화를 취소할 때 사용하는 코드는 다음과 같습니다.
bodyScrollLock.clearAllBodyScrollLocks();