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更新。

你不会相信调试这个需要多长时间，所以我把它留在这里以防其他人偶然发现类似的问题。 希望我可以节省别人几个小时的头发拉:)