Allow passing in custom `getScrollParent`

Problem

getScrollParent isn’t working correctly for my particular use case:

• My scroll container (overflow-y) is outside of my React app.
• My React app isn’t mounted in the DOM yet when getScrollParent runs.

(We’re including the React app inside of a page written in a legacy framework. This problem occurs because of how we mount the React section of the page.)

Minimal working example

Fork of main example: https://codesandbox.io/s/x2kkkrjm8q

The relevant changes are:

• Move .content-container out of <Page> and into index.html.
• Render <Page> into a div that isn’t in the DOM yet.

const div = document.createElement("div");
ReactDOM.render(<Page />, div);

const scrollContainer = document.querySelector(".content-container");
scrollContainer.appendChild(div);

Suggested solution

This is a pretty specific edge case that probably isn’t worth supporting in this library. That said, I’d like the ability to pass in a custom getScrollParent implementation. Then I could do:

<StickyBox getScrollParent={() => document.getElementById('#scroll-container')}>

[danielberndt]

Okay, makes sense. Two workarounds. Only mount StickyBox after scrollContainer.appendChild.

You could use a component like this:

class DelayedMount extends Component {
  this.state = {mountChildren: false}
  componentDidMount() {
    setTimeout(() => this.setState({mountChildren: true}))
  }
  render() {
    return this.state.mountChildren ? this.props.children : null
  }
}

// use it like
<DelayedMount><StickyBox>...content...</StickyBox></DelayedMount>

Or you do something like this:

class Page extends React.Component {

  handleRef = (n) => {
    this.stickyBoxInstance = n;
  }

  onPageProperlyMounted = () => {
    // call this function to simulate unmounting and re-mounting the underlying node.

    this.stickyBoxInstance.registerContainerRef(null);
    this.stickyBoxInstance.registerContainerRef(this.stickyBoxInstance.node);
  }

  render() {
    return (
      <div>
        <StickyBox ref={this.handleRef}>
          {...contents}
        </StickyBox>
      </div>
    );
  }
}

[danielberndt]

Alright 😃