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

Question

所以我有一个组件，当用户到达页面底部时加载更多产品。我使用了带有 useRef 的 IntersectionObserver，所以当用户看到页面底部的加载时，更多的内容被加载。

  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 进入前一个滚动位置时发生的闪烁？