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);

这是codeandbox的工作示例。

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

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

Answer 1

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

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

overflow-anchor: none;

到您的CSS。

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

Answer 2

这是我应用的修复程序，不确定它是否有效。我已经在单击按钮时存储了滚动位置，如果设置了滚动，则将滚动位置设置回该位置。

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const getRandomData = n =>
  new Array(n).fill(0).map(i => ({
    id: Math.random() * 1000,
    value: Math.random()
      .toString(36)
      .substring(7)
  }));
let scroll;
const onScroll = () => {
  if (scroll) {
    window.scrollTo(0, scroll);
    scroll = null;
  }
};
function App() {
  const [count, setCount] = useState(5);

  useEffect(
    () => {
      window.addEventListener("scroll", onScroll);
    },
    () => {
      window.removeEventListener("scroll", onScroll);
    },
    []
  );
  return (
    <div className="App">
      {getRandomData(count).map(item => (
        <div key={item.id}>{item.value}</div>
      ))}
      <button
        onClick={e => {
          scroll = window.scrollY;
          setCount(count + 5);
        }}
      >
        Load more
      </button>
      <div style={{ height: 400 }} />
    </div>
  );
}

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

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

2 个答案: