reactjs - 添加项目时无限滚动滚动闪烁

Question

所以我有一个组件，当用户到达页面底部时会加载更多产品。我将 IntersectionObserver 与 useRef 一起使用，因此当用户看到页面底部的加载时，会加载更多内容。

  const handleObserver = (entities: IntersectionObserverEntry[]) => {
    const target = entities[0];
    if (target.isIntersecting) {
      setProducts(counter => counter + 100);
    }
  };

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: `20px`,
      threshold: 1.0,
    };
    const observer = new IntersectionObserver(handleObserver, options);
    if (loader?.current) {
      observer.observe(loader.current);
    }
  }, []);

  return (
    <>
      <main>
        <ul>
          {product.length > 1 && (
            <>
              {product.map(element => (
                <li key={nanoid()}>
                  <Product
                    id={element.id}
                    name={element.name}
                    types={element.types}
                    imageUrl={element.image}
                  />
                </li>
              ))}
            </>
          )}

          <div className="loading" ref={loader}>
            <h2>Loading...</h2>
          </div>
        </ul>
      </main>
    </>
  );

我的问题是，当产品加载时，用户滚动直接到页面末尾，靠近下一次加载。为了解决这个问题，我创建了一个 pageYOffset 状态，将状态值更改为用户之前的滚动位置

  const [pageYOffset, setPageYOffset] = useState(0);

  const handleObserver = (entities: IntersectionObserverEntry[]) => {
    const target = entities[0];
    if (target.isIntersecting) {
      setPageYOffset(window.pageYOffset);
      setProductCounter(counter => counter + 100);
    }
  };

然后当产品状态改变时，我只更新一个 window.scroll

  useEffect(() => {
    window.scroll({ top: pageYOffset });
  }, [product]);

问题在于，当 window.scroll 触发时，屏幕只会闪烁一秒钟，看起来很糟糕。

如何首先阻止滚动发生或消除从 window.scroll 进入上一个滚动位置时发生的闪烁？

标签： reactjsscrollinfinite-scroll