vue.js - 尝试进行慢速滚动，但似乎 gsap 无法处理每个滚动的尽可能多的事件

Question

我需要减慢页面上的滚动速度以更好地为元素设置动画（例如，我的笔记本电脑上的一个轮子事件使 deltaY = 378 并且很难计算正确的偏移量来启动动画）。我决定用 e.preventDefault() 和 e.returnValue = false 禁用滚动。它运作良好，但有时页面会在您尝试滚动时开始“跳跃”。

import { gsap } from 'gsap'
import { ScrollToPlugin } from 'gsap/src/ScrollToPlugin.js'

gsap.registerPlugin(ScrollToPlugin);


export default {
    data: () => {
        return {
            currentSlide: 0,
            offsetTop: 0,
            pageHeight: 0,
            wheelCounter: 0,
            scrollCounter: 0,
            slides: [
                {
                    id: 'ad1',
                    bg: '/hall.jpg'
                },
                {
                    id: 'ad2',
                    bg: '/home.jpg'
                },
                {
                    id: 'ad3',
                    bg: '/hall.jpg'
                },
                {
                    id: 'ad4',
                    bg: '/home.jpg'
                }]
        }
    },
    methods: {
        checkScroll (event) {
            event.returnValue = false
            event.preventDefault()
            let sliderGap = 300
            let current, next
            let tl = gsap.timeline()
            this.wheelCounter += parseInt(event.deltaY / 5)
            if (this.wheelCounter < 0) this.wheelCounter = 0
            gsap.to(window, {scrollTo: this.wheelCounter, duration: 0.2})
            current = parseInt(this.wheelCounter / sliderGap)
            if (current > 4) current = 4
            if ((current != this.currentSlide) && (current < 4)) {
                document.getElementById('main').style.backgroundImage = 'url("' + this.slides[current].bg + '")'
                tl.to('#' + this.slides[this.currentSlide].id, {x: 20, opacity: 0, duration: 0.3})
                tl.to('#' + this.slides[current].id, {x: -20, opacity: 1, duration: 0.7})
                this.currentSlide = current
            }
            if (window.scrollY > 300) {
                tl.to('#about_header', {x: 0, opacity: 1, duration: 0.7})
                tl.to('#about_description', {y: 0, opacity: 1, duration: 0.7}, 0.5)
                tl.to('#about_picture', {x: 0, opacity: 1, duration: 1}, 0.5)
            }
            if (window.scrollY > 500) {
                tl.to('#left_offer', {y: 0, opacity: 1, duration: 1}, 0)
                tl.to('#right_offer', {y: 0, opacity: 1, duration: 1}, 0.5)
                tl.to('#offers_description', {x: 0, opacity: 1, duration: 0.5}, 1.5)
            }
        }
    }
}

我想过添加 vue-observe-visibility 包并通过它执行动画。但是滚动也应该是平滑的，我该怎么做。

标签： vue.jsscrollgsap