在加载更多项目时对自动滚动做出反应

Question

我面临着奇怪的问题。我有更多按钮，可以将 5 个项目添加到数组并显示它。

它在第一次加载更多时工作正常，但是当我在加载更多按钮后手动滚动时，它会保持在相同位置，并且项目会加载到上面，并且窗口会自动滚动以调整按钮的位置。

这是示例代码。

const getRandomData = n =>
  new Array(n).fill(0).map(i => ({
    id: Math.random() * 1000,
    value: Math.random()
      .toString(36)
      .substring(7)
  }));

function App() {
  const [count, setCount] = useState(5);
  return (
    <div className="App">
      {getRandomData(count).map(item => (
        <div key={item.id}>{item.value}</div>
      ))}
      <button onClick={e => setCount(count + 5)}>Load more</button>
      <div style={{ height: 400 }} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是codesandbox 工作示例。

如果加载多2-3次然后手动滚动。此后，如果我单击“加载更多”，则窗口会自动滚动。

https://codesandbox.io/s/343wmr8v66

Answer 1

我相信您正在寻找的称为“滚动锚定”。

您可以通过添加以下内容来禁用此行为：

overflow-anchor: none;

到你的CSS。

查看：https ://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor