在 Safari 上我可以使用什么来代替溢出锚点？

Question

我想在页面顶部插入元素而不更改可见的滚动内容。

当页面达到一定百分比时，元素会在滚动过程中添加。

在 Chrome 上一切正常，但在 Safari 上则不然，可见内容被下推并且不再可见。

我想使用overflow-anchor:auto来避免这种行为，但Safari不支持它，我可以使用什么来达到相同的结果？

我已经尝试使用requestAnimationFrame使用scrollTop重新对齐视口，但在这种情况下它不能按预期工作，因为元素是在滚动期间添加的并且位置不断变化。

Answer 1

requestAnimationFrame 对我有用：

  const previousRectRef = useRef<null | DOMRect>(null);
  
  ...

  const compensateScroll = (topContainer: HTMLElement) => {
    /* Mimicking scroll anchoring (overflow-anchor) behaviour for all browsers */
    previousRectRef.current = topContainer.getBoundingClientRect();

    function scrollAdjustment() {
      const rect = topContainer.getBoundingClientRect();

      if (!previousRectRef.current) {
        return;
      }

      const scrollChange = rect.height - previousRectRef.current.height;
      previousRectRef.current = rect;

      if (scrollChange === 0) {
        return;
      }
      window.scrollTo(0, window.scrollY + scrollChange);

      requestAnimationFrame(scrollAdjustment);
    }

    requestAnimationFrame(scrollAdjustment);
  };

我在添加顶部元素后调用它。不要忘记禁用所有浏览器的溢出锚点（设置：overflow-anchor：none）。

如果您还想从顶部删除项目，则可能需要补偿页面滚动高度的变化。