
if(targetBox){// 获取滚动容器的视口顶部位置 const containerTopscrollContainerRef.value.getBoundingClientRect().top // 获取高亮目标框当前相对于视口的的顶部位置 const boxToptargetBox.getBoundingClientRect().top // 计算出目标框相对于滚动容器内部内容的绝对偏移量 // 当前滚动高度 (目标框视口Y - 容器视口Y)目标框在内容区的绝对 Y const absoluteTopscrollContainerRef.value.scrollTop (boxTop - containerTop)// 加上视觉留白比如减去 100px让高亮块滚动后处于靠上但非紧贴顶部的舒适位置 // 也可以考虑减去视口高度的一半使其居中scrollContainerRef.value.clientHeight /2const paddingBefore120const finalScrollTopMath.max(0, absoluteTop - paddingBefore)// 执行精准滚动 scrollContainerRef.value.scrollTo({top: finalScrollTop, behavior:smooth})}scrollTop 滚动容器已经滚动了多少距离boxTop 目标元素相对于浏览器视口顶部的距离containerTop 滚动容器相对于浏览器视口顶部的距离boxTop - containerTop 目标元素相对于滚动容器顶部的偏移scrollTop (boxTop - containerTop) ││ absoluteTop (元素在内容中的绝对位置)// 假设scrollTop 500 // 已经往下滚了 500pxcontainerTop 100 // 容器在视口顶部往下 100pxboxTop 300 // 目标元素在视口顶部往下 300px// 计算absoluteTop 500 (300 - 100)absoluteTop 500 200absoluteTop 700 // 目标元素在整个内容中的位置是 700px// 滚动到该位置scrollContainer.scrollTo({ top: 700, behavior: ‘smooth’ })(boxTop - containerTop) 算的是目标在容器内的相对位置加上 scrollTop 后变成在整个内容中的绝对位置这样 scrollTo 才能精准定位到目标元素。