diff --git a/src/views/common/DocumentSearchWord.vue b/src/views/common/DocumentSearchWord.vue index c2eced7..4f31288 100644 --- a/src/views/common/DocumentSearchWord.vue +++ b/src/views/common/DocumentSearchWord.vue @@ -472,7 +472,7 @@ export default { } }, - smoothScrollTo(container, target, baseDuration = 300) { + smoothScrollTo(container, target, baseDuration = 350) { if (!container) return const maxScroll = container.scrollHeight - container.clientHeight const finalTarget = Math.min(Math.max(target, 0), Math.max(maxScroll, 0)) @@ -483,22 +483,25 @@ export default { return } - const distanceFactor = Math.min(Math.abs(change) / Math.max(container.clientHeight, 1), 2.4) - const duration = Math.min(600, baseDuration + distanceFactor * 120) + const distance = Math.abs(change) + const viewportHeight = container.clientHeight + const distanceFactor = Math.min(distance / Math.max(viewportHeight, 1), 2.2) + const duration = Math.min(600, baseDuration + distanceFactor * 90) const startTime = performance.now() - const ease = (t) => 1 - Math.pow(1 - t, 3) - const velocityBoost = Math.min(Math.max(Math.abs(change) / 2400, 0), 0.25) - this.cancelScrollAnimation() + const easeOutExpo = (t) => { + return t === 1 ? 1 : 1 - Math.pow(2, -10 * t) + } + const step = (now) => { const elapsed = now - startTime const progress = Math.min(elapsed / duration, 1) - const eased = ease(progress) - const basePosition = start + change * eased - const overshoot = velocityBoost * Math.sin(eased * Math.PI) - container.scrollTop = Math.min(Math.max(basePosition + overshoot * change, 0), maxScroll) + const eased = easeOutExpo(progress) + const currentPosition = start + change * eased + + container.scrollTop = Math.min(Math.max(currentPosition, 0), maxScroll) if (progress < 1) { this.scrollAnimationFrame = requestAnimationFrame(step) @@ -742,6 +745,11 @@ export default { overflow-y: auto; overflow-x: hidden; min-height: 0; + scroll-behavior: auto; + -webkit-overflow-scrolling: touch; + will-change: scroll-position; + transform: translateZ(0); + backface-visibility: hidden; } .doc-content {