如何在React应用程序中的Scroll上播放Lottie？

import React, { useEffect, useRef } from 'react';
import Lottie from 'lottie-web';

const ScrollLottie = () => {
  const scrollRef = useRef(null);

  useEffect(() => {
    const scrollElement = scrollRef.current;
    const lottieAnimation = Lottie.loadAnimation({
      container: scrollElement,
      renderer: 'svg',
      loop: true,
      autoplay: false,
      animationData: require('./path/to/animation.json')
    });

    const handleScroll = () => {
      const { top, bottom } = scrollElement.getBoundingClientRect();
      const isVisible = top < window.innerHeight && bottom >= 0;

      if (isVisible) {
        lottieAnimation.play();
      } else {
        lottieAnimation.stop();
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <div ref={scrollRef} />;
};