`$(window).scrollTop()`的React等价物。

Question

我试图检查用户是否已经滚动到文档的底部。有一个流行的 疑问 只能用Jquery来回答。

如何能在 最高答案 可以在React中完成吗？

到目前为止，我想明白了，相当于。

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

我想不起来了 $(window).scrollTop.

Answer 1

你是想用ReactJS检查用户是否已经滚动到文档底部。

在这里，你去。

在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 2

窗口对象中有一个新的API。这里的例子是用于滚动到顶部。你也可以把它用于底部。

https:/developer.mozilla.orgen-USdocsWebAPIWindowscrollTo。

顶部：

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.comromanonthego223d2efe17b72098326c82718f283adb。2. https:/medium.combetter-programmingcreat-a-scroll-to-top-arrow-using-react-hooks-18586890fedc。

Answer 3

你对React的期望太高了。React只关心向DOM渲染数据。你仍然可以在React中使用jQuery 是你不喜欢使用纯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 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>
  )
}

}