我正在尝试实现无限滚动，但无法获得 document.body.scrollHeight 或 window.scrollY 或 window.pageYOffset 在我的应用程序中工作。我已经通过检查 wikipedia 和其他网站来尝试它并且它工作正常，但由于某种原因它在我的 React 应用程序中不起作用。谁能帮忙？
检查 - react - 失败
检查 - 其他应用程序，例如维基百科 - 著作
应用日志 - react - 失败
我已经尝试在其他 React 应用程序中找到这个 scrollY 属性，但仍然一无所获。始终在 React 应用中记录 0。
如图所示，滚动条显然不在顶部。
<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
})
}
最佳答案
问题解决了!事实证明，如果您还想使用 scrollY 属性，则不能使用 height: 100%。如果您使用的是库，就像我使用的是 html, body: {height: 100%} 附带的简单网格，您必须将其删除。
关于javascript - ScrollTop 在 React Component 或检查器中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41605368/