时间戳

首页 > 解决方案 > 对加载更多项目时的自动滚动做出反应

javascript - 对加载更多项目时的自动滚动做出反应

问题描述

我面临着奇怪的问题。我有更多按钮，可将 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);

这是代码沙盒工作示例。

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

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

标签： javascriptreactjsscroll

解决方案

我相信你正在寻找的是所谓的滚动锚定。

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

overflow-anchor: none;

到你的 CSS。

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

推荐阅读