6

I'm trying to implement an infinite scrolling but I can't get document.body.scrollHeight or window.scrollY or window.pageYOffset to work in my app. I've tried it by inspecting wikipedia and other sites and it works fine, but for some reason it just doesn't work in my React app. Can anyone help?

Inspection - React - Fail

Inspection - Other apps e.g. Wikipedia - Works

App logging - React - Fail

I've since tried finding this scrollY property in other React applications but still nothing. Always logs 0 in a react app.

As you can see in the image, the scrollbar is clearly not at the top.

An image of the inspector when I try to find the scroll

<html lang="en"><head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 <link rel="stylesheet" href="./stylesheets/1.simple-grid.min.css">
 <link rel="stylesheet" href="./stylesheets/2.react-redux-toastr.min.css">
 <link rel="stylesheet" href="./stylesheets/3.main.css">
<script type="text/javascript" charset="utf-8" async="" src="./dev/1.js"></script><script type="text/javascript" src="chrome-extension://aadgmnobpdmgmigaicncghmmoeflnamj/ng-inspector.js"></script></head><body data-pinterest-extension-installed="cr2.0.5" cz-shortcut-listen="true">
  <div id="app" class="full-container"><div data-reactroot=""><div class="loading-bar" style="height: 10px; position: absolute; background: rgb(68, 108, 179); display: none;"></div><div><div><ul class="nav"><li class="nav-item brand-img"><a href="#/">HOME</a></li><div><li class="nav-item">Sign Out</li></div></ul><!-- react-text: 12 --><!-- /react-text --></div><!-- react-text: 13 --> <!-- /react-text --><div><div class="sidebarFilter"></div><a href="#/products/new">New Product</a><div><div id="listItems"><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bc9">0</a><p>random_type1</p><p><!-- react-text: 24 -->$<!-- /react-text --><!-- react-text: 25 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bca">1</a><p>random_type1</p><p><!-- react-text: 31 -->$<!-- /react-text --><!-- react-text: 32 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bcb">2</a><p>random_type1</p><p><!-- react-text: 38 -->$<!-- /react-text --><!-- react-text: 39 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bcc">3</a><p>random_type1</p><p><!-- react-text: 45 -->$<!-- /react-text --><!-- react-text: 46 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bcd">4</a><p>random_type1</p><p><!-- react-text: 52 -->$<!-- /react-text --><!-- react-text: 53 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bce">5</a><p>random_type1</p><p><!-- react-text: 59 -->$<!-- /react-text --><!-- react-text: 60 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bcf">6</a><p>random_type1</p><p><!-- react-text: 66 -->$<!-- /react-text --><!-- react-text: 67 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bd0">7</a><p>random_type1</p><p><!-- react-text: 73 -->$<!-- /react-text --><!-- react-text: 74 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bd1">8</a><p>random_type1</p><p><!-- react-text: 80 -->$<!-- /react-text --><!-- react-text: 81 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bd2">9</a><p>random_type1</p><p><!-- react-text: 87 -->$<!-- /react-text --><!-- react-text: 88 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bd3">10</a><p>random_type1</p><p><!-- react-text: 94 -->$<!-- /react-text --><!-- react-text: 95 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bd4">11</a><p>random_type1</p><p><!-- react-text: 101 -->$<!-- /react-text --><!-- react-text: 102 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bd5">12</a><p>random_type1</p><p><!-- react-text: 108 -->$<!-- /react-text --><!-- react-text: 109 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bd6">13</a><p>random_type1</p><p><!-- react-text: 115 -->$<!-- /react-text --><!-- react-text: 116 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bd7">14</a><p>random_type1</p><p><!-- react-text: 122 -->$<!-- /react-text --><!-- react-text: 123 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bd8">15</a><p>random_type1</p><p><!-- react-text: 129 -->$<!-- /react-text --><!-- react-text: 130 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bd9">16</a><p>random_type1</p><p><!-- react-text: 136 -->$<!-- /react-text --><!-- react-text: 137 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bda">17</a><p>random_type1</p><p><!-- react-text: 143 -->$<!-- /react-text --><!-- react-text: 144 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bdb">18</a><p>random_type1</p><p><!-- react-text: 150 -->$<!-- /react-text --><!-- react-text: 151 -->0<!-- /react-text --></p></div><div class="list-item"><img src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg" alt="aws_fileName"><a href="#/products/item/5876408b824f188645152bdc">19</a><p>random_type1</p><p><!-- react-text: 157 -->$<!-- /react-text --><!-- react-text: 158 -->0<!-- /react-text --></p></div></div></div></div></div><div class="redux-toastr top-right"></div></div></div>
  <script src="./dev/vendor.js.gz"></script>
  <script src="./dev/bundle.js.gz" async=""></script>

</body></html>
componentDidMount() {
    console.log('component did mount') // does log
    let body = document.querySelector('body')
    body.addEventListener('scroll', function (e) {
      let windowScroll = window.scrollY
      console.log('scrollTop: ', body.scrollTop) // always logs 0
      console.log('scrollY: ', window.scrollY) // always logs 0
      console.log('pageYOffset: ', window.pageYOffset) // always logs 0
    })
  }
Clement
  • 4,491
  • 4
  • 39
  • 69
  • 1
    Are you sure the scroll is in the body? Depending on how your app is structured and styled the scroll can be in a container inside the body, and not in the body itself. If you can, add the relevant html and css in your question. – Tiago Engel Jan 12 '17 at 10:27
  • Unfortunately I have tried all the child divs as well to no success. I've tried adding it to the `#app`, which my react component is inserted into and `#listItems`, which houses the list items div but that doesn't work either. – Clement Jan 13 '17 at 03:30
  • [This solution](http://stackoverflow.com/questions/25951121/scroll-listener-on-body) may be relevant; have you tried adding the event listener to `window` instead of `document.body`? – A. Vidor Jan 13 '17 at 04:46
  • 1
    For some reason, when i add it to the window like this `window.addEventListener('scroll', function (e) {...` nothing happens. It's like the 'scroll event isn't even detected. – Clement Jan 13 '17 at 05:14
  • Look like you have scroll not in body – degr Jan 13 '17 at 07:42
  • how would you change it? I've added the `addEventListener` to body, window and some other divs but all the same result :/ – Clement Jan 13 '17 at 07:44
  • I do not have scroll in my body but in a div with id="myDiv". I have used onScroll={this.scrollHappened} And when I try to log document.getElementById('myDiv').scrollTop. It constantly returns 0. What to do? – Rahul.A.Krishna Jul 04 '17 at 07:16

2 Answers2

6

Problem solved! It turns out you cannot use height: 100% if you want to use the scrollY prop as well. If you're using a library, like I was using simple-grid that comes with the html, body: {height: 100%}, you have to remove it.

Clement
  • 4,491
  • 4
  • 39
  • 69
  • Adding onto this, if you find you need that to be set (and not set to min-height) it could be an overflow property issue. Mine was `overflow: auto`. Removing that fixed it right away – Almost_Ashleigh May 29 '20 at 19:55
1

You should add an event listener for capturing scroll pixels from top of the page. Try this -

class App extends Component {

  constructor() {
    super();
    this.state = {
      scrollPixelsY: 0
    };
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }; 

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    this.setState({
      scrollPixelsY: window.scrollY
    });
    console.log(this.state.scrollPixelsY);
  };
...
Tathagat Jha
  • 11
  • 1