I am trying to implement infinite scrolling, but I cannot get document.body.scrollHeighteither window.scrollYor window.pageYOffsetto work in my application. I tried this by checking wikipedia and other sites, and it works great, but for some reason it just doesn't work in my React app. Can anyone help?
Inspection - Reaction - Failure
Inspection - other applications, for example. Wikipedia - Works
Application Registration - React - Fail
Since then, I have been trying to find this scrollY property in other React applications, but still nothing. Always logs 0in the appropriate application.
As you can see in the image, the scrollbar is clearly not at the top.
<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></div> <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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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>$0</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')
let body = document.querySelector('body')
body.addEventListener('scroll', function (e) {
let windowScroll = window.scrollY
console.log('scrollTop: ', body.scrollTop)
console.log('scrollY: ', window.scrollY)
console.log('pageYOffset: ', window.pageYOffset)
})
}