عضو کانال یوتیوب ما شوید.

ساخت المان لیست پیام ها با اسکرول خودکار در react js

ساخت المان لیست پیام ها با اسکرول خودکار در react js
ساخت المان لیست پیام ها با اسکرول خودکار در react js

ساخت المان لیست پیام ها با اسکرول خودکار در 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]