HTML· CSS - Code

스크롤 막기 – 스크롤 바는 유지, 기능은 막기

스크롤 막기 기능을 사용하려면 보통 overflow:hidden; 기능을 사용해서 스크롤바 자체를 없애주면 된다.

나아가 모바일에서 막는 걸 쓰려면 아래 코드를 같이 넣어주면 된다.

overflow:hidden; touch-action:none;

그러나 mask를 쓰면서 팝업 형식(이번 경우엔 네비게이션) 처럼 쓸 경우에 overflow를 hidden 처리하면 스크롤바가 사라지기에 스크롤바 너비만큼 팝업이 살짝 움직이게 된다.

그 경우가 미묘하기 싫을 경우 사용하게 되는 코드

css로만 처리가 조금 힘들어서 js를 주로 사용했다.

css 처리

body.over{touch-action:none; overflow-y:auto;}

js 처리

constructor(nav, aside, section, mask) {
    this.wheelEvent = function(event) { event.preventDefault(); };
}


if (this.btnNav) {
    this.btnNav.addEventListener('click', e => {
        e.preventDefault();
        const noScrollElement = document.querySelector('body');
        
        if(this.nav.classList.contains('on')){
            noScrollElement.removeEventListener('wheel', this.wheelEvent, { passive: false });
        }else{
            noScrollElement.addEventListener('wheel', this.wheelEvent, { passive: false });
        }
    });
}

마스크가 적용된 모습이며 우측 스크롤바도 있으나 실제 스크롤 되지 않는다.

실제 적용 모습 : https://pixiclue.com/