CODEWITHSUNDEEP
reactjsreact-dom
Charming Robot
Charming Robot

Reputation: 2660

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

I'm trying to check if a user has scrolled to the bottom of a document. There's a popular question answered only in Jquery.

How can the top answer be done in React?

So far, I figured out that the equivalent of:

I'm missing $(window).scrollTop.

Upvotes: 1

Views: 1324

Answers (4)

Muni Kumar Gundu
Muni Kumar Gundu

Reputation: 532

There is a new API in the window object. Example here is for scroll to top. You can make it for the bottom also. instead of top give as bottom

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

Top:

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

Bottom:

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

Check the bottom of the page in 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');
  }
};

use with the combination of react hooks

Follow these articles and code references: 1. https://gist.github.com/romanonthego/223d2efe17b72098326c82718f283adb 2. https://medium.com/better-programming/create-a-scroll-to-top-arrow-using-react-hooks-18586890fedc

Upvotes: 1

Serhat Kaya
Serhat Kaya

Reputation: 84

This probably will work for you. You can use React SyntheticEvent for this purpose

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

}

Upvotes: 0

gdh
gdh

Reputation: 13692

You are looking to check if a user has scrolled to the bottom of a document using React/JS.

Here you go.

Working demo in codesandbox

Code snippet

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

Upvotes: 0

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11305

You are expecting too much from React. React is only concerned with rendering data to the DOM. You can still use jQuery with React is you don't like using pure JS.

Example

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>

Upvotes: 0

Related Questions