用IntersectionObserver()的方法实现滚动加载

const showParaInviewport = () => {
        const observerCallbackFun = (entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const paraElement = entry.target;
              paraElement.classList.add("active");
              observer.unobserve(paraElement);
            }
          });
        };
        const observerOptions = {
          root: null, // Use the viewport as the root
          rootMargin: "0px 0px -20% 0px", // Trigger when 20% of the element is visible from the bottom
          threshold: 0.1, // Trigger as soon as any part of the element is visible
        };
        const observer = new IntersectionObserver(
          observerCallbackFun,
          observerOptions
        );
        document.querySelectorAll(".split-lines").forEach((paraElement) => {
          observer.observe(paraElement);
        });
      };
      showParaInviewport();