Does not work in a scrollable box when a window doesn't have scrolls

I have a relatively positioned element, and it’s scrollable:

import React, { Component } from 'react';
import styles from './styles.scss';

export default class Whatever extends Component {
  renderSections() {
    // outputting many elements, so the parent element's content overflows
  }

  render() {
    <div className={styles.box}
      {this.renderSections()}
      <Waypoint
        onEnter={() => console.log('YAYAY!')} />
    </div>
  }
}

And the stylesheet is simply:

.box {
  position: relative;
  margin: 30px 0;
  padding: 0 6px 20px;
  border: 6px solid white;

  @media (min-width: 1024px) {
    height: 60vh;
    min-height: 400px;
    max-height: 1000px;
    overflow-y: scroll;
  }
}

On small screens (less than 1024px), the element that contains a Waypoint instance doesn’t have scrolls, it’s fully visible. What overflows is window. And in this case, Waypoint fires the onEnter callback properly. But on bigger screens, the window normally doesn’t have scrolls (at least it’s very unlikely), and only .box element is scrollable. What happens in this situation can be described in few steps:

1. Since the Waypoint is at the very bottom, a user expects the onEnter callback function to be fired when they scrolls to the very bottom (live example: an EULA text that is required to be fully “read”).
2. User scrolls to the very bottom of the scrollable .box, but the event doesn’t get fired.
3. Once user has resized the window, the event starts firing properly, no matter how many times user scrolls to the very bottom.

Another interesting case is when HMR is working:

1. A developer loads the page, scrolls to the very bottom of .box, nothing happens.
2. Developer changes the component code, so the component gets remounted and rendered again.
3. Starting from when the component has been remounted, Waypoint works properly, with all events getting fired as they should.

The version I’m using is 2.0.2, the latest as of today. Nothing really special isn’t happening around the .box element and corresponding component.

[jamesplease]

@taxigy if you make a page reproducing this I’d be happy to help debug it.

[trotzig]

I’m closing this based on above discussion. Feel free to reopen if you end up seeing this again @taxigy. And thanks @jmeas for helping me keep the list of open issues down to a minimum!