Lightrun
question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow passing in custom `getScrollParent`

See original GitHub issue

Issue Description

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')}>

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
danielberndtcommented, May 4, 2018

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>
    );
  }
}
0reactions
danielberndtcommented, May 4, 2018

Alright 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to pass ref of component up three levels for scroll event?
The documentation says: getScrollParent Function Override method to return a different scroll listener if it's not the immediate parent of ...
Read more >
Having troubles using custom state management, loadMore ...
I'm using a custom state management instead of using the page ... Fetch the items passing the "page" parameter from the state const...
Read more >
react-windowed-list: Documentation | Openbase
A function that receives index and key and returns the content to be rendered for the item at that index. ... renderItem =...
Read more >
Ext.dom.ButtonElement | Ext JS 6.2.0 - Sencha Documentation
Returns the offsets of this element from the passed element. The element must both be part of the DOM tree and not have...
Read more >
https://www.ferris.edu/forms/js/popper.min.js.map
documentElement;\n }\n\n // Here we make sure to give as \"start\" the element that comes first ... getScrollParent';\nimport getBoundingClientRect from '.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found