javascript - 将元素添加到顶部时保持滚动位置

Question

我正在尝试创建一个可以向左和向右无限滚动的日历。当用户向前滚动(简单)或向后滚动(问题就在这里)时，它必须动态加载新内容。
当我将内容添加到页面末尾时，它工作正常 - 滚动条调整为新的 container.scrollWidth .但是当我必须在开头添加内容时，整个日历会以 400 像素的巨大跳跃向右移动，因为 container.scrollLeft属性没有改变，现在开始有一个新元素。
我试图通过增加 container.scrollLeft 来缓解这种情况。 400px - 新创建元素的宽度。这种方法有效，但仅在使用鼠标滚轮(shift+鼠标滚轮横向滚动)或移动触摸屏滚动时有效。
如果我使用鼠标拖动滚动条，它会出现故障 - 我猜它一直试图滚动到旧的 scrollLeft位置和无视我增加了它。
您能否建议一种方法来实现所有滚动方式的这种行为？
如果您可以将我指向一个使用此技术的站点，这样我就可以进行自我调查，那也很棒。
这是我的半工作示例:

function Container() {
  const rectangleWidth = 400;

  const container = React.useRef(null);

  const [leftRectangles, setLeftRectangles] = React.useState([0]);
  const [rightRectangles, setRightRectangles] = React.useState([1, 2, 3, 4]);


    // When we just rendered a new rectangle in the left of our container,
  // move the scroll position back
  React.useEffect(() => {
    container.current.scrollLeft += rectangleWidth;
  }, [leftRectangles]);

  const loadLeftRectangle = () => {
    const newAddress = leftRectangles[0] - 1;
    setLeftRectangles([newAddress, ...leftRectangles]);
  };

  const loadRightRectangle = () => {
    const newAddress = rightRectangles[rightRectangles.length - 1] + 1;
    setRightRectangles([...rightRectangles, newAddress]);
  };

  const handleScroll = (e) => {
    // When there is only 100px of content left, load new content
    const loadingOffset = 100;
    
    if (e.target.scrollLeft < loadingOffset) {
      loadLeftRectangle(e.target);
    } else if (e.target.scrollLeft > e.target.scrollWidth - e.target.clientWidth - loadingOffset) {
      loadRightRectangle(e.target);
    }
  };

  return (
    <div
      className="container"
      onScroll={handleScroll}
      ref={container}
    >
      {leftRectangles.map((address) => (
        <div className="rectangle" key={address}>
          {address}
        </div>
      ))}
      {rightRectangles.map((address) => (
        <div className="rectangle" key={address}>
          {address}
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(<Container />, document.querySelector("#app"))

.container {
  display: flex;
  overflow-x: scroll;
}

.rectangle {
  border: 1px solid #000;
  box-sizing: border-box;
  flex-shrink: 0;
  height: 165px;
  width: 400px;
  font-size: 50px;
  line-height: 165px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 1

我认为这是一种不应使用 native 浏览器滚动区域的情况。如果您考虑一下，如果滚动条在两个方向上继续无限长，那么滚动条就没有任何意义。或者它们的唯一含义是“已查看的区域”。滚动条不是无限区域的一个很好的比喻，因此滚动框是一种糟糕的方式来做你想做的事情。
如果您换一种方式考虑，您只会显示一组适合已知屏幕宽度的月份。我解决这个问题的方法是将每个日历绝对定位在容器内，并根据用户在虚拟 View 中穿梭的位置计算它们在渲染循环中的位置。这也将允许您在日历离屏幕太远时删除它们，并在用户滚动到他们的位置之前在屏幕外创建/缓冲它们以便显示。它会阻止你拥有一个任意宽的对象，这最终会减慢渲染速度。
解决此问题的一种方法是简单地对自 1970 年以来的每个月进行编号，并将您的 View 视为具有小数位置 viewX沿着这条线。 x 的月份位置应为 viewX - x .当用户拖动时，您移动 viewX相反并重新定位缓冲的元素。当用户停止拖动时，您采用最后一个速度并减慢它直到 viewX - x是一个整数。
这将避免大多数跨浏览器问题和偏移问题。它只需要在显示器运动时进行渲染循环。