diff --git a/static/src/components/input/InputComposer.vue b/static/src/components/input/InputComposer.vue index 377adc0..3154f29 100644 --- a/static/src/components/input/InputComposer.vue +++ b/static/src/components/input/InputComposer.vue @@ -597,6 +597,11 @@ const slashHighlightTop = ref(4); /** 手动滚动后切到鼠标 hover 模式,隐藏 JS 高亮条 */ const slashManualScrolled = ref(false); let slashAnimId: number | null = null; +/** 动画真正进行中(比 animId 更可靠,可覆盖 rAF 结束后的延迟 scroll 事件) */ +let slashAnimating = false; +/** 记录最近一次动画的目标 scrollTop 和结束时间,用于过滤动画后的延迟 scroll 事件 */ +let lastSlashAnimatedScroll: number | null = null; +let lastSlashAnimationEndTime = 0; const slashHighlightStyle = computed(() => { if (slashManualScrolled.value) return { display: 'none' }; @@ -615,6 +620,8 @@ const animateSlash = (element: HTMLElement, targetScroll: number) => { if (interrupted) { cancelAnimationFrame(slashAnimId); } + slashAnimating = true; + lastSlashAnimatedScroll = targetScroll; const startScroll = element.scrollTop; const startHighlight = slashHighlightTop.value; const distScroll = targetScroll - startScroll; @@ -624,7 +631,8 @@ const animateSlash = (element: HTMLElement, targetScroll: number) => { const startTime = performance.now(); const step = (now: number) => { - const elapsed = now - startTime; + // rAF 第一帧的 now 偶尔会早于 startTime,导致 progress 为负、scrollTop 反向抖动 + const elapsed = Math.max(0, now - startTime); const progress = Math.min(elapsed / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); element.scrollTop = startScroll + distScroll * eased; @@ -633,6 +641,8 @@ const animateSlash = (element: HTMLElement, targetScroll: number) => { slashAnimId = requestAnimationFrame(step); } else { slashAnimId = null; + slashAnimating = false; + lastSlashAnimationEndTime = performance.now(); } }; slashAnimId = requestAnimationFrame(step); @@ -640,7 +650,18 @@ const animateSlash = (element: HTMLElement, targetScroll: number) => { /** 手动滚动时切到鼠标 hover 模式,不再跟踪键盘选中 */ const onSlashScroll = () => { - if (slashAnimId !== null) return; + if (slashAnimating || slashAnimId !== null) return; + const list = skillSlashList.value; + if (!list) return; + const now = performance.now(); + // 动画结束后的延迟 scroll 事件:scrollTop 与动画目标一致,说明是动画尾声,忽略 + if ( + lastSlashAnimatedScroll !== null && + now - lastSlashAnimationEndTime < 150 && + Math.abs(list.scrollTop - lastSlashAnimatedScroll) < 1 + ) { + return; + } slashManualScrolled.value = true; }; @@ -766,6 +787,9 @@ const closeSlashMenu = () => { cancelAnimationFrame(slashAnimId); slashAnimId = null; } + slashAnimating = false; + lastSlashAnimatedScroll = null; + lastSlashAnimationEndTime = 0; skillSlashOpen.value = false; skillSlashQuery.value = ''; skillSlashActiveIndex.value = 0;