프론트 개발 블로그

scroll 이벤트가 실행되지 않을 때 본문

Javascript

scroll 이벤트가 실행되지 않을 때

maybe.b50 2021. 10. 26. 17:03
window.addEventListener('scroll', function() {
	...
});

1. 갑자기 잘 작동하던 스크롤 이벤트 핸들러가 작동되지 않아서 당황함. 

2. html 요소에 overflow-y: hidden; 을 준 것 때문이었음.

3. html 요소에서 해당 스타일을 삭제하니 해결됨. 

 

이런 경우에 DevTools에 에러 혹은 경고 멘트도 나오지 않는다.

스크롤을 숨겼으니 이벤트가 동작되지 않는 것인데, 내가 html 요소에 class로 overflow: hidden 스타일을 준 것을 잊고 있어서

다른 코드에 문제 있는 줄 알고 코드 확인 하느라 시간을 할애했다. 😮‍💨

이외에도 스크롤은 화면보다 컨텐츠 요소가 클 경우 발생되기 때문에 높이 자체를 100%나 100vh 로 지정할 경우에도 스크롤 이벤트가 작동되지 않는다.

 

 

 

 

 

 

 

반응형