react函数组件使用react-vant实动画楼梯

jsx文件

      

import React, { useState, useRef, useEffect } from 'react';
import { Sidebar } from 'react-vant';
import './home.scss';

export default () => {
    const items = [
        { key: '1', title: '第一项', text: 'Veniam magna minim 111' },
        { key: '2', title: '第二项', text: 'Veniam magna minim 222' },
        { key: '3', title: '第三项', text: 'Veniam magna minim 333' },
        { key: '4', title: '第四项', text: 'Veniam magna minim 444' },
    ];

    const [active, setActive] = useState(0);
    const rightContentRef = useRef(null);
    const [scrollTimeout, setScrollTimeout] = useState(null);
    const handleTabChange = (index) => {
        setActive(index);
        const element = rightContentRef.current.querySelector(`#item-${index}`);
        element.scrollIntoView({ behavior: 'smooth' });
    };
    useEffect(() => {
        const mainElement = rightContentRef.current
        if (!mainElement) return
        mainElement.addEventListener('scroll', handleScroll)
        return () => {
            mainElement.removeEventListener('scroll', handleScroll)
        }
    }, [])
    const handleScroll = () => {
        clearTimeout(scrollTimeout);
        setScrollTimeout(setTimeout(() => {
            const mainElement = rightContentRef.current;
            const scrollTop = mainElement.scrollTop;
            const scrollHeight = mainElement.scrollHeight;
            const clientHeight = mainElement.clientHeight;
            const maxScrollTop = scrollHeight - clientHeight;
            const index = Math.floor(scrollTop / maxScrollTop * items.length);
            setActive(index);
        }, 200));
    };

    return (
        <div className="home">
            <Sidebar value={active} onChange={handleTabChange} >
                {items.map((item, index) => (
                    <Sidebar.Item key={item.key} title={item.title} className={active === index ? 'rv-sidebar-item--select' : ''} />
                ))}
            </Sidebar>
            <div className='rr' ref={rightContentRef}>
                {items.map((item, index) => (
                    <div key={item.key} id={`item-${index}`}>
                        {item.text}
                    </div>
                ))}
            </div>
        </div>
    );
};

scss文件

   

.home{
    width: 100%;height: 100%;
    display: flex;
   
    .rr{
        height: 100%;width: 100%;
        box-sizing: border-box;overflow: hidden;
        border: 1px solid red;
        div{
            height: 83%;
        }
    }
}