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

물류 프로그램 설계하느라 홈페이지에 신경을 많이 못쓰던 와중에
scoll 시 section 부분에 효과를 넣어달라는 요청이 와서 처리 하려하는 와중에
발생한 문제

 

문제의 코드

document.addEventListener('DOMContentLoaded', () => {
    const sections = document.querySelectorAll('.scroll-area');
    window.addEventListener('scroll', () => {
      console.log('fuck');
      sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;
        const scrollPosition = window.scrollY + window.innerHeight;
  
        // 섹션의 절반 이상이 보여지면 애니메이션 적용
        if (scrollPosition > sectionTop + sectionHeight / 2) {
          section.style.opacity = 1;
          section.style.transform = 'translateX(0)';
        } else {
          section.style.opacity = 0;
          section.style.transform = 'translateX(-50px)';
        }
      });
    });
  });

 

 

분명 문제 없이 F word 가 찍혀야 하는데 찍히지 않았다.

전에 적용해 놓은 scroll snap 때문은 아닌가 하는 생각이 머리를 스치는데는 오래 걸리지 않았고 

 

문제의 원인

 

    /* 부모 스크롤 스냅 컨테이너 */
.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory; /* y 축 방향으로만 scroll snap 적용 */
}

/* 자식 스크롤 스냅 영역 */
.scroll-area {
  padding-top: 83px; /* 헤더의 높이만큼 상단 패딩 추가 */
  height: calc(100vh - 83px);
  scroll-snap-align: start; /* 스크롤 위치 맞춤 */
}

 

 

scroll-container 라는 class에 overflow-y 속성이 적용되어있어 실제 내가 스크롤 하는 영역은 전체 도큐먼트에서 일어나는게 아니라 .scroll-container 영역에서 일어나는 것!!

 

아마도 css 를 적용하거나 하시다가 overfolw-y : hidden 처리를 하시는 분들이 많을텐데 그 때도 scroll 이벤트는 동작하지 않는다

 

문제 해결

 

 <!-- ======= Hero Section ======= -->
<div class="scroll-container" id="inner_container">
<!-- 이하 dom 생략 -->
</div>



document.addEventListener('DOMContentLoaded', () => {
    const sections = document.querySelectorAll('.scroll-area');
    const container = document.getElementById('inner_container');
    container.addEventListener('scroll', () => {
        console.log('scroll');
    });
  });

 

scroll 이벤트 함수를 걸어주는 DOM 을 전체가 아닌 scroll-container 에 적용

 

성공!!