javascript - 交叉点观察者在 Edge 中不起作用

Question

我有一个问题，当用户滚动到页面底部时，我需要获取数据。为了解决这个问题，我使用intersection Observer. 它适用于 Chrome、Firefox、Opera 和 Safari，但它在 Edge 中不起作用，原因我不明白（而且也没有错误）。

这就是它应该是的

这是 Edge（否Loading...）

• 我将console.log放在handleObserver函数内部（内部if (this.state.prevY > y) {}语句）->在Edge中它没有触发

• 而且我试图通过 id 而不是引用目标this.loadingRef- 结果是相同的。

这是我的反应组件：

/**
 * App main react component
 */
export default class Main extends Component {
  state = {
    cards: [],
    isFetching: false,
    page: 1,
    prevY: 0,
    sortValue: 'name',
    searchValue: '',
    prevSearchValue: '',
    numberLoaded: null,
  };

  /**
   * Initial data fetch
   */
  componentDidMount() {
    this.getCards(this.state.page);

    // Options
    const options = {
      root: null, // Page as root
      rootMargin: '0px',
      threshold: 1.0,
    };
    // Create an observer
    this.observer = new IntersectionObserver(
        this.handleObserver.bind(this), // callback
        options
    );
    // Observe the `loadingRef`
    this.observer.observe(this.loadingRef);
  }

  /**
   * Callback for Intersection Observer
   */
  handleObserver(entities, observer) {
    const y = entities[0].boundingClientRect.y;
    if (this.state.prevY > y) {
      const curPage = this.state.page + 1;
      this.getCards(curPage, this.state.sortValue, this.state.searchValue);
      this.setState({page: curPage});
    }
    this.setState({prevY: y});
  }

  /**
   * Data fetch
   */
  getCards(page, sortValue = 'name', searchValue = '') {
   //... code
  }

  /**
   * Renders component
   */
  render() {
    const loadingCSS = {
      height: '10px',
      marginTop: '0',
      width: '1px',
    };
    const {cards, isFetching, numberLoaded} = this.state;
    return (
      <main className="l-main">
        <h1 className="t1">
          MTG Creatures{numberLoaded && ` (${numberLoaded} loaded)`}
        </h1>
        {!isFetching && cards.length === 0 && (
          <p className="t0">No cards have been found</p>
        )}

        {/* code */}

        {cards.length !== 0 && <Cards cards={cards} />}
        <div
          ref={(loadingRef) => (this.loadingRef = loadingRef)}
          style={loadingCSS}
        >
          {isFetching && <Loader />}
        </div>
      </main>
    );
  }
}

根据 MS Edge 中的建议：IntersectionObserver。对你起作用吗？我尝试添加最小宽度、最小高度和边框——>它对我不起作用