美文网首页
react-custom-scrollbars 滚动到底部

react-custom-scrollbars 滚动到底部

作者: w晚风 | 来源:发表于2023-05-10 22:05 被阅读0次

日常开发中,数据会实时变动,但希望可以自动滚动到底部。如下实例即可

import React, { useEffect, useRef, useState } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';

const Index = () => {
    const scrollbarsRef = useRef(null);
    // 模拟数据
    const [dataList, setDataList] = useState<string[]>([]);

    useEffect(() => {
        if(dataList.length === 0){
            let arr = [];
            for (let index = 0; index < 100; index++) {
                arr.push('测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试')
            };
            setDataList([...arr]);
        };
        
        // 监听数据的变化滚动到底部
        if (scrollbarsRef.current) {
            // 滚动到底部方法
            scrollbarsRef.current.scrollToBottom();
        }
    }, [dataList]);

    return (
        <div>
            <Scrollbars autoHeightMin={'186px'} autoHide autoHeight ref={scrollbarsRef}>
                {
                    dataList.map((item: string, index: number) => {
                        return (
                            <div key={index}>{index}:{item}</div>
                        )
                    })
                } 
            </Scrollbars>
        </div>
    );
}

export default Index;

相关文章

网友评论

      本文标题:react-custom-scrollbars 滚动到底部

      本文链接:https://www.haomeiwen.com/subject/tcijsdtx.html