[Next.js] body태그에 overflow-x:hidden 을 사용할 시 문제점

// src/styles/globals.css

body {
	overflow-x:hidden;
}

x축 (가로) 스크롤을 없애기 위해 body에 CSS로 overflow-x:hidden을 사용할경우

window.addEventListener('scroll', func) 가 정상적으로 작동이 되지 않는다.

document.getElementById(__next).addEventListener // 안됨
document.body.addEventListener // 안됨

이러한 방법을 사용해봤지만, 적용이 안되었다.

 

결론은 위처럼 사용할시 scroll event 함수를 줄수가 없다.

 

body::-webkit-scrollbar {
	display:none;
}

이렇게 scrollbar를 없애는 방법이 있다.

 

Reference

https://github.com/vercel/next.js/issues/6132

how can i handle window scroll event · Issue #6132 · vercel/next.js

https://github.com/vercel/next.js/discussions/18299

Window scroll event not fired · vercel/next.js · Discussion #18299