ソースを参照

更新新英语切换

wangxy 2 ヶ月 前
コミット
bc32e74616
1 ファイル変更22 行追加9 行削除
  1. 22 9
      utils/common.js

+ 22 - 9
utils/common.js

@@ -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 });
+		}
+	});
 }