페이지네이션 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 코드 입니다.

<div className={"InfoPageComments"}>
        {/* 학생 코멘트 리스트 */}
        <ul
          className={"CommentsList"}
          ref={commentsRef}
          onScroll={handleScroll}
        >
          {commentList.map((item) => (
            <InfoPageCommentsItem item={item} key={item.id} />
          ))}
        </ul>
      </div>

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

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

.CommentsList{
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-inline-start: 0px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; /* 넘치면 아래로 줄을 바꾸도록 설정 */
  overflow: scroll;
}

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

[woohm402]

일단 혹시 css 에서는 .InfoPageComments 라는 이름으로 선택했고 jsx에서는 className이 CommentsList 로 되어 있는 것 같은데 👀 실제 코드에는 잘 적용되어 있는 건가요?

[HyungGeun-Cho]

아 넵! 제가 css코드를 잘못 올려서 수정했습니다.
더불어 무의식으로 issue에 올려버려서 죄송합니다 ^^;

[woohm402]

수정된거 확인했습니다!

[woohm402]

그럼 .InfoPageComments 는 어떤 element인가요?

scroll이 ul element가 아닌 .InfoPageComments 를 기준으로 되고 있을 가능성이 높아 보입니다

[HyungGeun-Cho]

아 넵 확인해보겠습니다! 감사합니다 :)

[HyungGeun-Cho]

ul element 대신 InfoPageComments div element에 대해 적용해보니 해결되었습니다! 감사합니다.