[리액트] 자동 스크롤 이벤트

scrollIntoView()

element 기반으로 사용되며, 특정 element를 기준으로 스크롤을 이동 시킨다.

 

상단 혹은 하단

element.scrollIntoView(true);
element.scrollIntoView(false);

 

애니메이션

 - behavior : 전환 에니메이션 정의 (auto || smooth)

 - block : 수직 정렬 (start || center || end || nearest)

 - inline : 수평 정렬 (start || center || end || nearest)

element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

 

FrameWork

import { useRef, useEffect } from "react";
import 컴포넌트 from "주소";

// chatMsg 는 채팅 내용이다
const ChatBox = ({chatMsg}) => {
 const scrollRef = useRef();

 useEffect(() => {
  scrollRef.current.scrollIntoView({ behavior: "smooth" });
  // scrollRef의 element위치로 스크롤 이동 behavior는 전환 에니메이션의 정의
 }, [재실행 시키고 싶은 요소]);

 return (
  <>
   {<컴포넌트 chatMsg={chatMsg} />}
   <div ref={scrollRef} />
  </>
 );
};

export default ChatBox;

핵심은 useEffect를 통해 scrollRef로 이동하는 것이다.