Stop React spring анимация, если пользователь прокручивает анимацию - PullRequest
Новая
       6

Stop React spring анимация, если пользователь прокручивает анимацию

0 голосов
/ 30 октября 2019

Я использую реагирующую пружину для анимации прокрутки окна через 500 мс после установки компонента. Проблема возникает, если анимация прокрутки и прокрутка пользователя происходят одновременно. Я сделал это, чтобы проверить, если прокрутка страницы равна 0, прежде чем она начинает анимацию, но это решает только если пользователь прокручивает до триггера 500 мс.

Вот код: 

const [, setY] = useSpring(() => ({ y: window.innerHeight * 0.05 }))

useEffect(() => {
    setTimeout(() => {
        // Cross browser way of knowing how much the user has scrolled the page.
        const scrollTop = (window.pageYOffset !== undefined)
            ? window.pageYOffset
            : (document.documentElement || document.body.parentNode || document.body).scrollTop
        // Checks if the user hasn't scrolled himself.
        if (scrollTop === 0) {
            // Animates.
            setY({
                y: window.innerHeight * 0.05,
                reset: true,
                from: { y: window.scrollY },
                onFrame: props => window.scroll(0, props.y)
            })
        }
    }, 500)
}, [])

Я также пыталсядеструктурировать функцию stop и использовать ее внутри onFrame, но, похоже, она не работает:

const [, setY, stop] = useSpring(() => ({ y: window.innerHeight * 0.05 }))

Также window.scroll() вызывает событие scroll, чтобы я мог 't отличить сценарий прокрутки от пользователя прокрутки.

Есть идеи, как я могу решить эту проблему?

Заранее спасибо!

...