|
@@ -179,17 +179,30 @@ export function getDataFromStr(strdata) {
|
|
|
return strdata.toString().split(',')
|
|
|
}
|
|
|
|
|
|
-export function useActiveDomIntoView(classNameParent,classNameActive) {
|
|
|
+export function useActiveDomIntoView(classNameParent, classNameActive) {
|
|
|
nextTick(() => {
|
|
|
const container = document.querySelector(classNameParent);
|
|
|
const highlightItem = document.querySelector(classNameActive);
|
|
|
- if (highlightItem) {
|
|
|
- const topPos = highlightItem.offsetLeft - container.offsetLeft;
|
|
|
- container.scrollTo({
|
|
|
- left: topPos,
|
|
|
- behavior: 'smooth'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
|
|
|
+ // 1. 检查元素是否已在可视区
|
|
|
+ const containerRect = container.getBoundingClientRect();
|
|
|
+ const activeRect = highlightItem.getBoundingClientRect();
|
|
|
+ const isVisible = activeRect.left >= containerRect.left &&
|
|
|
+ activeRect.right <= containerRect.right;
|
|
|
+ if (isVisible) return;
|
|
|
+
|
|
|
+ // 2. 优先使用 scrollIntoView
|
|
|
+ const supportsSmoothScroll = 'scrollBehavior' in document.documentElement.style;
|
|
|
+ if (supportsSmoothScroll) {
|
|
|
+ highlightItem.scrollIntoView({
|
|
|
+ behavior: 'smooth',
|
|
|
+ inline: 'center',
|
|
|
+ block: 'nearest'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 3. 降级方案:瞬时滚动 + 手动动画
|
|
|
+ const targetPos = highlightItem.offsetLeft - container.offsetLeft;
|
|
|
+ container.scrollTo({ left: targetPos });
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|