페이지네이션 onScroll 관련 질문

[HyungGeun-Cho]

요약

페이지네이션 구현 중 commentsList에서 스크롤을 했을 때 onScroll이 작동되지 않습니다.

상황

페이지네이션 구현 중 commentsList에서 스크롤을 했을 때 onScroll이 작동되지 않습니다. 확인차 댓글 리스트를 스크롤할 시 콘솔 창에 "scroll check"가 나타나도록 했는데, 이 또한 전혀 나타나지 않는 상황입니다.

문제 내용

다음은 댓글 리스트 ref와 onScroll 시 작동되는 handleScroll 함수입니다.

  const commentsRef = useRef({});

  const handleScroll = () => {
    const scrollTop = commentsRef.current.scrollTop;
    const scrollHeight = commentsRef.current.scrollHeight;
    const clientHeight = commentsRef.current.clientHeight;
    console.log(scrollTop);
    console.log("scroll check")
  }

다음은 jsx 안에서 구현한 댓글 리스트 ul 코드 입니다.

 <ul className={"CommentsList"} ref={commentsRef} onScroll={handleScroll}>
          {commentList.map((item) => (
            <InfoPageCommentsItem item={item} key={item.id} />
          ))}
        </ul>

다음은 댓글 리스트 ul에 대한 css 코드입니다.

.InfoPageComments {
  position: absolute;
  top: 244px;
  bottom: 85px;
  left: 52%;
  width: 45%;
  border: 1px solid black;
  box-sizing: border-box;
  overflow-y: scroll;
}

scroll이 감지되었다면, 최소 onScroll을 통해 handleScroll 함수가 콜 되어 콘솔창에 문구를 나타내야 할 텐데, 아예 변화가 없어 scroll 자체를 감지하지 못 하는 상황인지 궁금합니다. 감사합니다..!