滚动距离计算

if(targetBox){// 获取滚动容器的视口顶部位置 const containerTop=scrollContainerRef.value.getBoundingClientRect().top // 获取高亮目标框当前相对于视口的的顶部位置 const boxTop=targetBox.getBoundingClientRect().top // 计算出目标框相对于滚动容器内部内容的绝对偏移量 // 当前滚动高度 +(目标框视口Y - 容器视口Y)=目标框在内容区的绝对 Y const absoluteTop=scrollContainerRef.value.scrollTop +(boxTop - containerTop)// 加上视觉留白（比如减去 100px），让高亮块滚动后处于靠上但非紧贴顶部的舒适位置 // 也可以考虑减去视口高度的一半，使其居中：scrollContainerRef.value.clientHeight /2const paddingBefore=120const finalScrollTop=Math.max(0, absoluteTop - paddingBefore)// 执行精准滚动 scrollContainerRef.value.scrollTo({top: finalScrollTop, behavior:'smooth'})}

scrollTop 滚动容器已经滚动了多少距离
boxTop 目标元素相对于浏览器视口顶部的距离
containerTop 滚动容器相对于浏览器视口顶部的距离
boxTop - containerTop 目标元素相对于滚动容器顶部的偏移

scrollTop + (boxTop - containerTop) │
│ = absoluteTop (元素在内容中的绝对位置)
// 假设：
scrollTop = 500 // 已经往下滚了 500px
containerTop = 100 // 容器在视口顶部往下 100px
boxTop = 300 // 目标元素在视口顶部往下 300px

// 计算：
absoluteTop = 500 + (300 - 100)
absoluteTop = 500 + 200
absoluteTop = 700 // 目标元素在整个内容中的位置是 700px

// 滚动到该位置：
scrollContainer.scrollTo({ top: 700, behavior: ‘smooth’ })

(boxTop - containerTop) 算的是"目标在容器内的相对位置"，加上 scrollTop 后变成"在整个内容中的绝对位置"，这样 scrollTo 才能精准定位到目标元素。