javascript scroll event 제어

스크롤 기능을 막아야 하는 상황에서 대부분은 body 에 overflow-y: hidden 을 주는 방법이 제시되지만, 그렇지 않은 경우 자바스크립트로 이를 처리해야 한다.

 

javascript로 scroll, mousewheel, touchmove 등의 이벤트를 걸어 e.preventDefulat()로 이벤트를 막아볼 수 있겠지만, mousewheel 이벤트와 같이 스크롤과 관련 된 이벤트는 기본적으로 passive로 처리되어 있어 추가 옵션을 설정 할 수 없다.

 

아래와 같은 오류 발생

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>

 

wheel 이벤트를 사용하여 스크롤을 감지하고 preventDefault를 호출하면서 성능 최적화와 문제해결을 동시에 할 수 있다.

passive 옵션을 추가하고, wheel 이벤트로 바꾸면 body 스크롤링이 잘 멈춘다.

function wheelevent(e) {
    e.preventDefault();
}
document.querySelector("body").addEventListener('wheel', wheelevent, { passive: false });
document.querySelector("body").removeEventListener('wheel', wheelevent, { passive: false });

 

 

 

wheel 이벤트와 scroll, mousewheel 의 차이, 그리고 성능 최적화에 대한 내용

 

wheel 이벤트는 마우스 휠 또는 트랙패드 등 더 다양한 입력 장치에서 발생하는 스크롤 이벤트로, mousewheel 이벤트와 비슷하지만, wheel 이벤트가 표준에 더 가깝고 여러 입력 장치에서의 일관성을 제공한다.

 

또 wheel 이벤트가 passive로 처리되는 것은 브라우저가 성능 최적화를 위해 도입한 개념 중 하나이고, 브라우저는 기본적으로 wheel 이벤트에 대해 passive 플래그를 설정하기 때문에 이벤트 리스너 내에서 preventDefault를 호출하지 못하게 한다.

 

passive 플래그가 설정된 이벤트 리스너에서 preventDefault를 호출하는 것은 브라우저가 스크롤링 동작을 최적화하기 위해 이벤트 핸들러를 비동기적응로 실행하도록 허용하게 된ㄴ데, 이로 인해 호출 순서가 보장되지 않기 때문에 스크롤을 막아야 하는 경우에는 passive: false로 설정 된 이벤트 리스너를 사용해야 한다.

 

 

---

 

 

https://velog.io/@h_jinny/javascript-body-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%A7%89%EA%B8%B0

[javascript] body 스크롤 막기

 

https://solbel.tistory.com/1299

[javascript/jquery] [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive