ScrollTracker.js

const set = new Set()

if (typeof window !== 'undefined') {
  window.addEventListener('scroll', () => {
    Array.from(set).forEach(fn => fn())
  })
}

class ItemsListCursorTracker extends Component {
  constructor(props) {
    super(props)
    set.add(this.handleScroll)
  }

  componentDidMount() {
    this.top = this.el.getBoundingClientRect().top
  }

  componentWillUnmount() {
    set.delete(this.handleScroll)
  }

  handleScroll = () => {
    if (!this.el) return
    const { top: prevTop } = this
    const { top: nextTop } = this.el.getBoundingClientRect()

    if ((prevTop > 0 && nextTop <= 0) || (prevTop <= 0 && nextTop > 0)) {
      console.log('Верхняя граница элемента пересекла границу вьюпорта...')
      if (prevTop > 0 && nextTop <= 0) {
        console.log('...и стала не видна пользователю')
      } else if (prevTop <= 0 && nextTop > 0) {
        console.log('...и стала видна пользователю')
      }
      this.top = nextTop
    }
  }

  getNode = el => {
    this.el = el
  }

  render() {
    return (
      <div
        ref={this.getNode}
        style={{ width: 1, height: 1, pointerEvents: 'none' }}
      />
    )
  }
}