javascript - Javascript offsetHeight不从初始渲染高度更新吗？

我正在使用无限滚动方法将内容加载到div中，但无法正常工作。

这是我在window.onscroll函数中用于加载新内容的计算：

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

但是document.documentElement.offsetHeight在添加新内容时永远不会收到更新的值。它始终保持在初始值，这将导致整个无限滚动反向进行，仅在滚动到屏幕顶部而不是预期的底部时才加载新内容。

我确保将附加的divs放在正确的元素中，还尝试使用document.getElementById('wrapper').offsetHeight而不是将其从正文中拉出，但是我得到的是相同的结果。

我还尝试过删除所有相关的CSS样式，以防万一导致问题，同样的结果。

我知道没有任何更多信息就不可能对任何细节进行详细诊断，但这是一个包含许多其他因素的大项目，有可能导致此问题，所以我只是问是否有人在遇到某些问题类似或有其他建议的尝试？

非常感谢！

**这是一个工作版本的sandbox（我最初从那里获得代码）。我只是不知道为什么offsetHeight元素不会在我的代码库中更新。

编辑在下面添加了我的React Component，但不确定它是否有助于诊断。

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添加了控制台的屏幕截图，以显示实际问题。

最佳答案

FFS！找到了...我将全局html元素的高度设置为100％：

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

这阻止了offsetHeight的更新。

您不会相信调试它会花费多长时间，因此，如果有人遇到类似问题，我会把它留在这里。希望我可以节省别人几个小时的头发:)