Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- SSR
- animation
- Eclipse Bug
- ref전달하기
- TaskRunner
- tomcat
- error
- 이클립스
- 정적웹사이트
- gulp
- Eclipse
- 보일러플레이트
- VW
- Study
- Adobe
- Eclipse Compare View
- frontend
- Sass
- 이클립스 소스 비교 안보일 때
- JavaScript
- 1분코딩
- 자바스크립트
- ref
- React
- next.js
- css
- CSS3
- java
- html
- npm
Archives
- Today
- Total
프론트 개발 블로그
scroll 이벤트가 실행되지 않을 때 본문
window.addEventListener('scroll', function() {
...
});
1. 갑자기 잘 작동하던 스크롤 이벤트 핸들러가 작동되지 않아서 당황함.
2. html 요소에 overflow-y: hidden; 을 준 것 때문이었음.
3. html 요소에서 해당 스타일을 삭제하니 해결됨.
이런 경우에 DevTools에 에러 혹은 경고 멘트도 나오지 않는다.
스크롤을 숨겼으니 이벤트가 동작되지 않는 것인데, 내가 html 요소에 class로 overflow: hidden 스타일을 준 것을 잊고 있어서
다른 코드에 문제 있는 줄 알고 코드 확인 하느라 시간을 할애했다. 😮💨
이외에도 스크롤은 화면보다 컨텐츠 요소가 클 경우 발생되기 때문에 높이 자체를 100%나 100vh 로 지정할 경우에도 스크롤 이벤트가 작동되지 않는다.
반응형
'Javascript' 카테고리의 다른 글
Javascript 중복 클릭 방지 (0) | 2022.09.27 |
---|---|
window.visualViewport.width, window.visualViewport.height (0) | 2022.01.11 |
IIFE, 재귀 함수, 중첩 함수, 콜백 함수, 고차 함수, 순수, 비 순수 함수 정리 (0) | 2021.09.29 |
자바스크립트에서 타입을 체크하는 방법 typeof (0) | 2021.09.28 |
void 0; 이 뭐지? (3) | 2021.01.18 |