bonus
/
smart-bid-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

word 搜索动画优化

This commit is contained in:
cwchen 2025-11-12 16:00:55 +08:00
parent 6567c0f7b6
commit 48dd413f87
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/common/DocumentSearchWord.vue
View File

@ -472,7 +472,7 @@ export default {
} }
}, },
smoothScrollTo(container, target, baseDuration = 300) { smoothScrollTo(container, target, baseDuration = 350) {
if (!container) return if (!container) return
const maxScroll = container.scrollHeight - container.clientHeight const maxScroll = container.scrollHeight - container.clientHeight
const finalTarget = Math.min(Math.max(target, 0), Math.max(maxScroll, 0)) const finalTarget = Math.min(Math.max(target, 0), Math.max(maxScroll, 0))
@ -483,22 +483,25 @@ export default {
return return
} }
const distanceFactor = Math.min(Math.abs(change) / Math.max(container.clientHeight, 1), 2.4) const distance = Math.abs(change)
const duration = Math.min(600, baseDuration + distanceFactor * 120) 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 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() this.cancelScrollAnimation()
const easeOutExpo = (t) => {
return t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
}
const step = (now) => { const step = (now) => {
const elapsed = now - startTime const elapsed = now - startTime
const progress = Math.min(elapsed / duration, 1) const progress = Math.min(elapsed / duration, 1)
const eased = ease(progress) const eased = easeOutExpo(progress)
const basePosition = start + change * eased const currentPosition = start + change * eased
const overshoot = velocityBoost * Math.sin(eased * Math.PI)
container.scrollTop = Math.min(Math.max(basePosition + overshoot * change, 0), maxScroll) container.scrollTop = Math.min(Math.max(currentPosition, 0), maxScroll)
if (progress < 1) { if (progress < 1) {
this.scrollAnimationFrame = requestAnimationFrame(step) this.scrollAnimationFrame = requestAnimationFrame(step)
@ -742,6 +745,11 @@ export default {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
min-height: 0; min-height: 0;
scroll-behavior: auto;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
transform: translateZ(0);
backface-visibility: hidden;
} }
.doc-content { .doc-content {