react将选中本文自动滑动到容器可视区域内

    // 自动滚动到可视区域内
    useEffect(() => {
        const target = ref;
        const wrapper = wrapperRef?.current;
        if (target && wrapperRef) {
            const rect = target.getBoundingClientRect();
            const wrapperRect = wrapper.getBoundingClientRect();
            const isVisible = rect.bottom <= wrapperRect.bottom && rect.top >= wrapperRect.top;
            if (!isVisible) {
                wrapper.scrollTo({ top: rect.top, behavior: 'smooth' });
            }
            console.log('isVisible', isVisible);
        }
    }, [avaliableIndex]);

 <div className={ve.defaultWrapper} ref={wrapperRef}>
            {content.map((text, index) => (
                

{ if (isSelectedRow(index)) { ref = r; } }} >p>)} div>

react将选中本文自动滑动到容器可视区域内_第1张图片

你可能感兴趣的:(react.js,javascript,前端)