스크롤바는 그대로 두면서 스크롤 안 되게 하는 방법
본문
https://sir-purewhite.websiting.kr/
위 사이트에 아래 "이메일주소 무단수집거부"를 클릭하면 스크롤바가 없어지면서 사이트 배열이 스크롤바가 없어진 만큼 움직이는데요.
이메일주소 무단수집거부를 클릭했을 때 스크롤바 안 사라지게 하려고
all{html.with-featherlight{overflow-y:auto}
위와 같이 css 적용했는데
스크롤바는 안 사라지지만 스크롤이 되네요 ㅜㅜ
이메일주소 무단수집거부 클릭했을 때 사이트 배열이 살짝 움직이는 게 살짝 신경쓰여서 그러는데..
스크롤바는 안 사라지게 하면서 스크롤은 안 되게 하려면 어떻게 해야 할까요?
답변 2
모달 열릴 때 마우스휠 이벤트를 막고 모달 닫힐 때 다시 푸는 방법으로 해보세요.
css overflow 컨트롤은 실제 스크롤바 디자인과 영역에 관여하므로 휠 자체를 막고 풀어야 합니다.
네 답변 감사합니다
스크롤바를 CSS 로 overflow: hidden 하시는게 좋으실듯합니다.
좋은 하루되세요~
답변 감사합니다 블로거님. 이미 overflow:hidden으로 되어 있습니다!
overflow:hidden 때문에 스크롤바가 없어져서 overflow-y:auto로 바꿔본 거예요.
눌렀을때 overflow: hidden 으로 변경 맞으신가요?
넵 ㅠㅠ 눌렀을 때 관련 css가 all{html.with-featherlight{overflow:hidden} 이고 이게 기본설정인데 이렇게 되어 있어서 스크롤바가 나오지 않습니다. 저 hidden 부분을 auto로 바꾸니까 스크롤바가 나오고요. 스크롤바는 나오게 하고 스크롤만 막고 싶은데 방법을 모르겠네요 ㅠㅠ 좀 더 연구를 해보겠습니다. 답변 감사합니다
overflow hidden 시 레이아웃 변경되는 부분때문에 그러실수도 있으니 모달을 해보시는게 좋을듯합니다.
body.modal-open {overflow: hidden;}
휠 차단
function openModal(){
document.body.classList.add('modal-open');
window.addEventListener('wheel', preventScroll, {passive: false});
}
function closeModal(){
document.body.classList.remove('modal-open');
window.removeEventListener('wheel', preventScroll, {passive: false});
}
function preventScroll(e){
e.preventDefault();
}
수집 거부 누를때
document.getElementById("버튼아뒤").addEventListener('click', openModal);
네 답변 감사합니다 블로거님 말씀해주신 부분 적용해보겠습니다!
