overlay 창 열렸을 때 본문 스크롤 바 제거.

overlay 창 열렸을 때 본문 스크롤바 제거.

티스토리 블로그 운영자 중에에는 자신의 취향에 맞게 스킨을 수정하셔서 사용하시는 분들이 많이 있을 것이다.

하지만 수정에 수정을 거듭하다 보면 언제부터 그랬는지 모를 오류들이 나타나기 시작한다.

이번 포스트는 이러한 오류들 중 하나를 해결하는데 도움이 될 수 있기를 바라는 목적의 포스트가 되겠다.

오버레이가 열려 있을 때 본문스크롤 바가 사라지지 않고 오버레이 스크롤 바와 이중으로 나타나는 현상이 발생하는 경우가 있다. 

기능에 지장 없이 단지 미관상 안 좋은 것이라면 그나마 괜찮지만, 본문이 함께 스크롤 되는 경우에는 반드시 수정해야 하는 오류 중 하나가 될 수 밖에 없다.

인터넷 검색을 하면 이 문제의 해결책으로 매우 다양한 방식들이 제시되고 있다.

지금의 이 방식 또한 그러한 여러 방안 중의 하나라 할 수 있다.

 

이 방식을 통하여 위 문제를 해결하기 위해서는 전제조건이 필요하다.

"모달 열기 버튼"(“modal-open-button")및 "모달 닫기 버튼"("modal-close-button”)

두 버튼 모두 링크 설정에 다음 URL이 설정되어 있어야 한다.

javascript:void(0);

모달 열기, 닫기 버튼에 url 설정을 javascript:void(0) 으로 하고 있는 경우에 아래 스크립트를 이용하면 문제의 해결에 도움이 될 수 있다. 

(스크립트 내용 중 "my-custom-modal" 부분은 '열기 버튼' 바로 위 혹은 그 위 단계의 class 명을 적어주면 된다.)

prevent_scroll.txt

0.00MB

자료의 출처 : https://forum.webflow.com/t/how-to-prevent-scroll-behind-pop-up/7934/5