채택완료
스크롤바는 그대로 두면서 스크롤 안 되게 하는 방법
https://sir-purewhite.websiting.kr/
위 사이트에 아래 "이메일주소 무단수집거부"를 클릭하면 스크롤바가 없어지면서 사이트 배열이 스크롤바가 없어진 만큼 움직이는데요.
이메일주소 무단수집거부를 클릭했을 때 스크롤바 안 사라지게 하려고
Copy
all{html.with-featherlight{overflow-y:auto}위와 같이 css 적용했는데
스크롤바는 안 사라지지만 스크롤이 되네요 ㅜㅜ
이메일주소 무단수집거부 클릭했을 때 사이트 배열이 살짝 움직이는 게 살짝 신경쓰여서 그러는데..
스크롤바는 안 사라지게 하면서 스크롤은 안 되게 하려면 어떻게 해야 할까요?
답변 2개 / 댓글 7개
채택된 답변
+20 포인트
모달 열릴 때 마우스휠 이벤트를 막고 모달 닫힐 때 다시 푸는 방법으로 해보세요.
css overflow 컨트롤은 실제 스크롤바 디자인과 영역에 관여하므로 휠 자체를 막고 풀어야 합니다.
스크롤바를 CSS 로 overflow: hidden 하시는게 좋으실듯합니다.
좋은 하루되세요~
답변에 대한 댓글 6개
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);
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);
답변을 작성하려면 로그인이 필요합니다.