交叉口观察器在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。对你起作用吗？我尝试添加最小宽度，最小高度和边框->不适用于我