ساخت المان لیست پیام ها با اسکرول خودکار در react js
اگر در حال توسعه ی پروژه ای هستید که در آن یک بخش گفتگو یا chat box دارید و می خواهید یک باکسی را داشته باشید که در صورت آپدیت به صورت خودکار اسکرول کند در این نوشته یک کد برای react js برای شما آماده کرده ایم تا به سادگی بتوانید از آن استفاده کنید.
همراه ما باشید.
ساخت المان لیست پیام ها با اسکرول خودکار در react js
از کد زیر برای ساخت یک بخش گفتگو یا چت به همراه اسکرول خودکار داشته باشید:
import React, { useEffect, useState, useRef } from "react"; function Chat() { const [messageItem, setMessageItem] = useState([]); const container = useRef<HTMLDivElement>(null) const autoScroll = () => { try { const { offsetHeight, scrollHeight, scrollTop } = container.current; container.current?.scrollTo(0, scrollHeight); } catch (err) {} }; useEffect(() => { autoScroll(); }, [messageItem]); return ( <div ref={container}> // messages </div> ) }
اگر سوالی در ارتباط با کد بالا دارید در بخش نظرات همین نوشته برای ما بنویسید.
موفق باشید.
برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]
ارسال پاسخ