页签左右滚动效果兼容所有环境不依赖behavior

This commit is contained in:
RuoYi
2026-03-22 14:44:55 +08:00
parent 20dc6b3925
commit 9c6ae1dd60

View File

@@ -28,8 +28,32 @@ export default {
methods: {
smoothScrollTo(target) {
const $scrollWrapper = this.scrollWrapper
$scrollWrapper.scrollTo({ left: target, behavior: 'smooth' })
setTimeout(() => this.$emit('updateArrows'), 350)
const start = $scrollWrapper.scrollLeft
const distance = target - start
const duration = 300
let startTime = null
function ease(t, b, c, d) {
t /= d / 2
if (t < 1) return c / 2 * t * t + b
t--
return -c / 2 * (t * (t - 2) - 1) + b
}
const emit = this.$emit.bind(this)
function step(timestamp) {
if (!startTime) startTime = timestamp
const elapsed = timestamp - startTime
$scrollWrapper.scrollLeft = ease(elapsed, start, distance, duration)
if (elapsed < duration) {
requestAnimationFrame(step)
} else {
$scrollWrapper.scrollLeft = target
emit('updateArrows')
}
}
requestAnimationFrame(step)
},
handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40