有没有更好的方法来检查是否到达了 div 的底部

Question

我制作了一个条款和条件应用程序，如果用户已经到达div的底部，它会启用“我同意”按钮。

function App() {
  const [content, setContent] = useState("");
  const [status, setStatus] = useState(true);

  const fetchContent = () => {
    fetch('https://jaspervdj.be/lorem-markdownum/markdown.txt')
      .then(response => response.text())
      .then((text) => setContent(text))
  }

  const handleScroll = (e) => {
    const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
    return bottom && setStatus(false);
  }

  useEffect(() => fetchContent(), []);


  return (
    <div className="App">
      <Document
        title="Terms and Conditions"
        content={content}
        onScroll={handleScroll}
        status={status} />
    </div>
  );
}

这是文档组件：

const Document = ({ title, content, onScroll, status }) => {
  return (
    <div>
      <h1 className="title">{title}</h1>
      <div className="content" onScroll={onScroll}>{content}</div>
      <button className="button" type="button" disabled={status}>I Agree</button>
    </div>
  )
}

它按预期工作，但有没有更好的方法来实现逻辑？

Answer 1

使用 jQuery windows 事件可能是这样的，

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);

请把它放在第一位。