Javascript offsetHeight 沒有從初始渲染高度更新？

Question

我正在使用無限滾動方法將內容加載到 div 中，但它無法正常工作。

這是我在window.onscroll函數中用於加載新內容的計算：

window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight

但是在添加新內容時document.documentElement.offsetHeight永遠不會收到更新的值。 它始終保持在初始值，這導致整個無限滾動反向工作，僅在滾動到屏幕頂部時加載新內容，而不是按預期滾動到底部。

我已經確保附加的 div 被放置在正確的元素中，也嘗試使用document.getElementById('wrapper').offsetHeight而不是將它從身體上拉下來，但我得到了相同的結果。

我還嘗試刪除所有相關的 css 樣式，以防萬一導致問題，同樣的結果。

我知道在沒有更多信息的情況下，任何人都無法詳細診斷此問題，但這是一個包含許多其他可能導致此問題的因素的大項目，所以我只是問是否其他人遇到過某些問題類似的或有其他建議可以嘗試嗎？

非常感謝！

** 這是一個工作版本的沙箱（我從那里得到了最初的代碼）。 我只是不知道為什么我的代碼庫中的 offsetHeight 元素沒有更新。

編輯在下面添加了我的 React 組件，但不確定它是否有助於診斷。

 import React, { Component, Fragment } from 'react'; import axios from 'axios'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; class ProfileFollowers extends Component { constructor(props) { super(props); this.state = { error: false, hasMore: true, isLoading: false, followers: [] }; window.onscroll = () => { const { loadFollowers, state: { error, isLoading, hasMore } } = this; if (error || isLoading || !hasMore) return; if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ) { loadFollowers(); } }; } componentWillMount() { this.loadFollowers(); } loadFollowers = () => { axios .get('https://randomuser.me/api/?results=10') .then(results => { const nextFollowers = results.data.results.map(follower => ({ email: follower.email, name: Object.values(follower.name).join(' '), photo: follower.picture.medium, username: follower.login.username, uuid: follower.login.uuid })); this.setState({ hasMore: this.state.followers.length < 100, isLoading: false, followers: [...this.state.followers, ...nextFollowers] }); }) .catch(err => { this.setState({ error: err.message, isLoading: false }); }); }; render() { const { error, hasMore, isLoading, followers } = this.state; return ( <div id="profile-followers-wrap"> {followers.map(follower => ( <Fragment key={follower.username}> <hr /> <div style={{ display: 'flex' }}> <img alt={follower.username} src={follower.photo} style={{ borderRadius: '50%', height: 72, marginRight: 20, width: 72 }} /> <div> <h2 style={{ marginTop: 0 }}>@{follower.username}</h2> <p>Name: {follower.name}</p> <p>Email: {follower.email}</p> </div> </div> </Fragment> ))} <hr /> {error && <div style={{ color: '#900' }}>{error}</div>} {isLoading && <div>Loading...</div>} {!hasMore && <div>No more!</div>} </div> ); } } ProfileFollowers.propTypes = { auth: PropTypes.object.isRequired }; const mapStateToProps = state => ({ auth: state.auth }); export default connect(mapStateToProps)(ProfileFollowers);

編輯 2添加了控制台的屏幕截圖以顯示實際問題。

Answer 1

FFS！ 找到了...我將全局 html 元素的高度設置為 100%：

html {
  height: 100%; // Arrrrggghhhh!
  width: 100%;
}

這會阻止offsetHeight更新。

你不會相信調試這個需要多長時間，所以我把它留在這里以防其他人偶然發現類似的問題。 希望我可以節省別人幾個小時的頭發拉:)