React 等效于 `$(window).scrollTop()`

Question

我正在尝试检查用户是否已滚动到文档底部。有一个受欢迎的 question 仅在 Jquery 中回答。

如何在 React 中完成 top answer？

到目前为止，我发现相当于：

$(window).height 是：window.pageYOffset
$(document).height 是：document.documentElement.offsetHeight

我不见了$(window).scrollTop。

Answer 1

你对 React 的期望太高了。 React 只关心将数据渲染到 DOM。你是不是不喜欢用纯JS。

例子

const { useState, useEffect } = React;

const App = () => {
  
  useEffect(() => {
    
    $(window).scrollTop($(document).height());
    
  }, [])

  return <div style={{height: '200vh', background: 'blue'}}></div>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

Answer 2

window 对象中有一个新的 API。这里的例子是滚动到顶部。你也可以把它放在底部。而不是顶部给出底部

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

顶部：

window.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

底部：

window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })

检查 javascript

中的页面底部

window.onscroll = function() {
  var d = document.documentElement;
  var offset = d.scrollTop + window.innerHeight;
  var height = d.offsetHeight;

  console.log('offset = ' + offset);
  console.log('height = ' + height);

  if (offset >= height) {
    console.log('At the bottom');
  }
};

配合react hooks使用

关注这些文章和代码参考： 1. https://gist.github.com/romanonthego/223d2efe17b72098326c82718f283adb 2. https://medium.com/better-programming/create-a-scroll-to-top-arrow-using-react-hooks-18586890fedc

Answer 3

您要检查用户是否已使用 React/JS 滚动到文档底部。

给你。

Working demo in codesandbox

代码片段

export default function App() {
  const [isPageEnd, setIsPageEnd] = useState(false);
  useEffect(() => {
    document.addEventListener("scroll", trackScrolling);
    return () => document.removeEventListener("scroll", trackScrolling);
  }, []);

  const trackScrolling = () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
      setIsPageEnd(true);
    }
    if (false) {
      console.log(" bottom reached");
      document.removeEventListener("scroll", trackScrolling);
    }
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {isPageEnd ? (
        <p> you reached bottom of page. Refresh page and begin again</p>
      ) : (
        <p>
          Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in
          laying out print, graphic or web designs. The passage is attributed to
          an unknown typesetter in the 15th century who is thought to have
          scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a
          type specimen book Lorem ipsum, or lipsum as it is sometimes known, is
          dummy text used in laying out print, graphic or web designs. The
          passage is attributed to an unknown typesetter in the 15th century who
          is thought to have scrambled parts of Cicero's De Finibus Bonorum et
          Malorum for use in a type specimen book Lorem ipsum, or lipsum as it
          is sometimes known, is dummy text used in laying out print, graphic or
          web designs. The passage is attributed to an unknown typesetter in the
          15th century who is thought to have scrambled parts of Cicero's De
          Finibus Bonorum et Malorum for use in a type specimen book Lorem
          ipsum, or lipsum as it is sometimes known, is dummy text used in
          laying out print, graphic or web designs. The passage is attributed to
          an unknown typesetter in the 15th century who is thought to have
          scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a
          type specimen book Lorem ipsum, or lipsum as it is sometimes known, is
          dummy text used in laying out print, graphic or web designs. The
          passage is attributed to an unknown typesetter in the 15th century who
          is thought to have scrambled parts of Cicero's De Finibus Bonorum et
          Malorum for use in a type specimen book
        </p>
      )}
    </div>
  );
}

Answer 4

这可能对您有用。您可以为此目的使用 React SyntheticEvent

class SomeComponent extends React.Component {
   findBottomScroll = e => {
     let element = e.target
     if (element.scrollHeight - element.scrollTop === element.clientHeight) {
       // whatever you want
   }
}
render() {
  return (
    <div onScroll={this.handleScroll}></div>
  )
}

}

React 等效于 `$(window).scrollTop()`

React equivilant of `$(window).scrollTop()`

reactjs

react-dom