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>