react-visibility-sensor（传感器组件）

npm 地址

React 的传感器组件，当它进入或离开窗口视口时会通知您。
可用于判断窗口是否滑动到底部、头部、离开、进入等执行的回调操作。

demo

（1）可用于滚动加载效果，滚动到底部出发请求。
（2）下面实现滑动到底部的时候有一个旋转的进度条

import React, { Component } from "react";
//引入
import VisibilitySensor from "react-visibility-sensor";
import CircularProgress from "@material-ui/core/CircularProgress";
class App extends Component {
  render() {
    return (
      <VisibilitySensor onChange={this.loadMorePage}>
        <CircularProgress className={this.props.progress} />
      </VisibilitySensor>
    )
  }
}
export default App;

内容一部分进入和完全移出屏幕触发

需要 partialVisibility 和 offset 配合使用

• partialVisibility：（默认值false），如果只有一部分可见，则认为该元素可见。可能的值还有-‘top’，’right’，’bottom’，’left’-如果需要检测其中之一何时显式可见。
• offset：（默认值{}）带有偏移量，您可以在可见性应已更改的情况下从一侧定义px的数量。因此，在示例中，设置offset={{top:10}}意味着当视口顶部小于10像素时，可见性将变为隐藏状态。

  <VisibilitySensor
  partialVisibility
  offset={{ top: 10 }}
  onChange={this.loadMorePage}
  >
  <div>内容</div>
  </VisibilitySensor>