Skip to content

Qvil Blog

Github

[React] React scroll to bottom

— React, Scroll — 1 min read

React 채팅앱 채팅 전송 시 scrollToBottom 구현

  1. ref로 Element의 scrollTop을 scrollHeight로 변경해주는 scrollToBottom 함수 구현
  2. useEffect로 messages state변경 시 scrollToBottom함수 호출
1const messageBoxRef = useRef<HTMLUListElement>();
2const [messages, setMessages] = useState();
3
4const scrollToBottom = () => {
5  if (messageBoxRef.current) {
6    messageBoxRef.current.scrollTop = messageBoxRef.current.scrollHeight;
7  }
8};
9
10useEffect(() => {
11  scrollToBottom();
12}, [messages]);
13
14<div ref={messageBoxRef}>{renderChat()}</div>;