ScrollTop无法在React Component或检查器中工作

Question

我正在尝试实现无限滚动但我无法在我的应用程序中使用document.body.scrollHeight或window.scrollY或window.pageYOffset。我已经通过检查维基百科和其他网站来尝试它并且它工作正常，但由于某种原因它只是在我的React应用程序中不起作用。有人可以帮忙吗？

检查 - 反应 - 失败

检查 - 其他应用，例如维基百科 - 作品

应用程序日志记录 - React - Fail

我已经尝试在其他React应用程序中找到这个scrollY属性但仍然没有。始终在反应应用程序中记录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
    })
  }

Answer 1

问题解决了！事实证明，如果你想使用height: 100%道具你也不能使用scrollY。如果您正在使用库，就像我使用html, body: {height: 100%}附带的简单网格一样，您必须将其删除。

Answer 2

您应该添加一个事件侦听器，用于从页面顶部捕获滚动像素。试试这个 -

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

ScrollTop无法在React Component或检查器中工作

问题描述投票：4回答：2

2个回答

最新问题

ScrollTop无法在React Component或检查器中工作

问题描述 投票：4回答：2

2个回答

最新问题

问题描述投票：4回答：2