대화가 진행될 때 스크롤을 자동으로 아래로 내려가게 할려면 어떻게 해야하나요 ? 도와주세요!

앗 제가 강의에서 그 부분을 생략하고 넘어갔나 보네요 .... ;;

우선 아래 소스 보시면요
<div style="color: #eeffff; background-color: #263238; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;"> 
<div>function Chatbot(props) {</div>
<div>const messageEndRef = useRef(null);</div>
<div>useEffect(() =&gt; {</div>
<div>if (messageEndRef.current) {</div>
<div>messageEndRef.current.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });</div>
<div>}</div>
<div>});</div>
 
<div>return (</div>
<div>&lt;div style={{ height: 700, width: 700, border: '3px solid black', borderRadius: '7px' }}&gt;</div>
 
<div>&lt;div style={{ height: 644, width: '100%', overflow: 'auto' }}&gt;</div>
<div>{renderMessages(messagesFromRedux)}</div>
<div>&lt;div ref={messageEndRef} /&gt;</div>
<div>&lt;/div&gt;</div>
 
<div>&lt;input style={{ margin: 0, width: '100%', height: 50, borderRadius: '4px', padding: '5px', fontSize: '1rem' }}</div>
<div>placeholder="Send a message..."</div>
<div>onKeyPress={keyPressHandler}</div>
<div>type="text" /&gt;</div>
 
<div>&lt;/div&gt;</div>
<div>)</div>
<div>}</div>
 
<div>export default Chatbot</div>
</div>
제가 일부로 이 스크롤 부분만 남기고 다른 소스는 지웠습니다 ~ !&nbsp;
이 부분을 이용해주세요 ^^&nbsp;&nbsp;

인프런 커뮤니티 질문&답변

자동 스크롤