Menu
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.
<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
})
}
819
In the Gantt component, you can set the vertical scroller position dynamically by clicking the custom button using the setScrollTop method.
scrollTop is deprecated in strict mode.
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.
100
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);
};
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
