scroll 이벤트가 발생하지 않는 경우

문제 원인:

팝업 레이어에서 스크롤 이벤트를 감지해서 lazy-loading으로 캐싱된 이미지를 스크롤 시마다 변경해주는 메서드가 발생하지 않음.

but 팝업 레이어 바깥에서는 scroll Event가 발생하는 데에 문제가 없었다.

문제원인은 팝업 전체의 overflow: hidden

 

문제 해결:

내부 내부 레이어단의 height: 100% (overflow-y: auto) 였기 때문에 팝업 레이어 내부에서만 스크롤 이벤트가 발생하는 것이다. 그러나 팝업의 height를 변경하거나 팝업 스크롤 시 바깥의 스크롤이 fire 되는 것은 의도한 바가 아니기 때문에

팝업에 ref를 걸어 scroll 이벤트를 캡처해서 처리하였다.

import React, { useEffect, useRef } from 'react';

const YourComponent = () => {
  const scrollRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      // lazy 라이브러리의 메서드를 실행
    };

    // scrollRef에 대한 스크롤 이벤트 리스너 추가
    scrollRef.current?.addEventListener('scroll', handleScroll);

    return () => {
      // 컴포넌트가 언마운트될 때 이벤트 리스너 제거
      scrollRef.current?.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div ref={scrollRef} style={{ overflowY: 'auto' }}>
      {/* 스크롤을 발생시킬 엘리먼트 */}
    </div>
  );
};

export default YourComponent;

 

사실 lazy 라이브러리(?)가 사내 소스이지만 static에 올라간 스크립트 파일이라 수정이 거의 불가해서 (레거시...)

해당 파일의 window 이벤트만 잡는 로직은 수정하지 못하고 lazy loading 해주는 부분만 스크롤 할 때마다 호출하게 하였다.

만약에 내가 lazy 소스를 수정할 수 있다면 스크롤 이벤트가 발생하는 컨테이너를 지정할 수 있게끔 할 것 같다.