页签左右滚动效果兼容所有环境不依赖behavior
This commit is contained in:
@@ -28,8 +28,32 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
smoothScrollTo(target) {
|
smoothScrollTo(target) {
|
||||||
const $scrollWrapper = this.scrollWrapper
|
const $scrollWrapper = this.scrollWrapper
|
||||||
$scrollWrapper.scrollTo({ left: target, behavior: 'smooth' })
|
const start = $scrollWrapper.scrollLeft
|
||||||
setTimeout(() => this.$emit('updateArrows'), 350)
|
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) {
|
handleScroll(e) {
|
||||||
const eventDelta = e.wheelDelta || -e.deltaY * 40
|
const eventDelta = e.wheelDelta || -e.deltaY * 40
|
||||||
|
|||||||
Reference in New Issue
Block a user