当前位置：首页 > article >正文

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

article 2025/1/26 15:32:30

    // 自动滚动到可视区域内
    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) => (
                <p
        
                    ref={(r) => {
                        if (isSelectedRow(index)) {
                            ref = r;
                        }
                    }}
                ></p>)}
                </div>