2

我正在使用反应弹簧在组件安装后 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)
}, [])

我还尝试将停止函数解构并在内部使用它，onFrame但它似乎不起作用：

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

还会window.scroll()触发scroll事件，因此我无法区分脚本滚动和用户滚动。

关于如何解决这个问题的任何想法？

提前致谢！

4

1 回答 1

0

我用这个：让用户滚动停止滚动顶部的jquery动画？

我制作了自己的基于反应的事件处理程序

  const cancelEvents = [
    "scroll",
    "mousedown",
    "DOMMouseScroll",
    "mousewheel",
    "keyup",
    "touchstart",
    "touchmove",
  ];

  const cancelAnimationHandler = useCallback((e) => {
    if (
      e.which > 0 ||
      cancelEvents.reduce(
        (accumulator, currentValue) =>
          e.type === accumulator || e.type === currentValue
      )
    ) {
      api.stop();
    }
  }, []);
  useEffect(() => {
    cancelEvents.map((event) =>
      window.addEventListener(event, cancelAnimationHandler)
    );
    () =>
      cancelEvents.map((event) =>
        window.removeEventListener(event, cancelAnimationHandler)
      );
  }, [cancelAnimationHandler]);
于 2021-08-03T22:49:05.680 回答