vue3 nav栏 左右定位到选中项

<div class="discovery-nav-list" ref="navListRef">
	<div class="discovery-nav-list-item" :class="{ active: currentIndex === item.value }" v-for="item in navList" :key="item" @click="navChange(item.value, $event)">{{ item.text }}</div>
</div>

//页签切换
const navChange = (item, e) => {
    loading.value = true;
    currentIndex.value = item;
    const rect = e.target.getBoundingClientRect();
    if (rect.left + rect.width > (window.innerWidth || document.documentElement.clientWidth) || rect.left < 0) {
        navListRef.value.scrollTo({
            left: navListRef.value.scrollLeft + (rect.left < 0 ? rect.left : rect.left + rect.width - window.innerWidth),
            behavior: 'smooth', // 可选，以平滑动画过渡
        });
    }
    listData.value = [];
    getDate();
};