How to allow scroll on multiple elements?

[dotmlj]

Hi.

How is it possible to allow scroll on multiple elements?

The doc mentions "support nested scrollable elements" and "More than one lock" but I don't see/understand how it's done.

Thank you! :)

[theKashey]

Oh, that's really is not explained in the documentation. But there is a shards prop, where you can provide an array of Refs to "other elements"

const ref = useRef();

<div ref={ref}>Some location</div>
<RemoveScroll shards={[ref]}>Work for "Some Location", as well as for own children</RemoveScroll>

👉 keep in mind, shards are not "portal-friendly"

[dotmlj]

Thank you for the fast reply, it works! :)

For future reference here's how I made it:

class Details extends React.Component {
  constructor(props) {
    this.firstScrollElement = React.createRef();
  }

...

<div className={classes.scroll} ref={this.firstScrollElement}>
    children
</div>

<RemoveScroll shards={[this.firstScrollElement]} className={classes.scroll}>
    children
</RemoveScroll>

Notice that "ref" on <RemoveScroll> in @theKashey example should of course be "shards".

[theKashey]

Yep, of course "shards" 😅

[stale[bot]]

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.