Is there a way to scroll up a stateless component?

Question

I have two divs on the page side by side and the left one is a stateless component showing the information regarding the option selected from the right side.

The page itself has overflow: hidden and the left side component has overflow-y: scroll allowing the user to scroll down and up.

Until here everything is good however when the user scrolls down and then select another piece in the right side, I should scroll this stateless component up.

return (
    <div
      style='display: flex; flex: 1 1 0; height: 100%; overflow-y: scroll'
      ref={myElement => {
        this.myElement = myElement
      }}
    >
       My content
    </div>
  )

And once we have a ref on this element, I could have something like this:

this.myElement.scrollTop = 0

I am trying to put a ref in this div to be able to scroll once this component receives any update as https://stackoverflow.com/a/33204783/1696029 but the ref does not work with stateless component.

Any ideas how can I scroll up only this left stateless component?

What version of react are you using? In particular, is it 16.8 or later? — Nicholas Tower, Jul 15 '19 at 14:11

score 1 · Accepted Answer · answered Jul 15 '19 at 14:19

1

Consider the following component heirarchy

<Parent>
  <LeftComponent />
  <RightComponent />
</Parent>

You can define a ref function for LeftComponent on Parent.. Something like

leftComponentRefFunction(myElement) {
  this.myElement = myElement
}

Dont forget to bind this function inside parent constructor.

And after this, send leftComponentRefFunction function as prop to the stateless component

<LeftComponent refFunction={this.leftComponentRefFunction} />

Now inside the LeftComponent use the prop function to set the ref

return (
<div
  style='display: flex; flex: 1 1 0; height: 100%; overflow-y: scroll'
  ref={props.refFunction}
>
   My content
</div>

)

What we're basically doing here is lifting the state logic up to the parent component.

Now you'll have access to the leftComponent ref on the parent this. and hence you will be able to set the scroll to 0

answered Jul 15 '19 at 14:19

Ankur Mittal

65
5

Nice solution. However, even doing `element.scrollTop = 0` in the parent, the left component is not scrolling up. Do you know why? – andrehigher Jul 15 '19 at 14:41
Is it possible for you to share a codepen/ codesandbox here? I'll have a look at your code – Ankur Mittal Jul 15 '19 at 14:46
Nice! The difference is that: you're using the button in the parent component. It should be something like this: https://codesandbox.io/s/youthful-franklin-hvgzt – andrehigher Jul 15 '19 at 15:19
1

Here. there were some minor mistakes in the above code.. Here's the working example - https://codesandbox.io/s/kind-ritchie-15wub – Ankur Mittal Jul 15 '19 at 15:44
Working now! Thank you! – andrehigher Jul 15 '19 at 15:47

Is there a way to scroll up a stateless component?

1 Answers1