0

In react "^15.4.1", I want to display middle section of a page after reload. So I am trying to do it using scrollbar but I am getting an error like,

main.js:43122 Uncaught TypeError: Cannot read property 'scrollTop' of null
 at ref (main.js:43122)
 at detachRef (main.js:82172)
 at Object.ReactRef.detachRefs (main.js:82227)
 at Object.receiveComponent (main.js:10145)
 at ReactCompositeComponentWrapper._updateRenderedComponent (main.js:77618)

Importing like, import { Scrollbars } from 'react-custom-scrollbars'; and the version is 4.0.1

In .jsx file,

componentDidMount() {
  this.scrollTop(200);
}

handleScrolling = (frame) => {
 if(frame.top === 1) this.setState({ loading: true })
}

scrollTop = (value) => {
  if(this.refs.scrollbar) this.refs.scrollbar.scrollTop(value);
}

<Scrollbars
    ref={(scrollbar) => {scrollbar.scrollTop(200);}}
    style={{ height: '100vh' }} onScrollFrame={this.handleScrolling}>
    ...

How can I fix this issue? Actually I am new to ReactJS. Please help me regarding the same.

Shruthi R
  • 1,863
  • 4
  • 39
  • 77
  • can you provide the code for `Scrollbars` component and overall give us some more context in terms of code? – Martin Shishkov Dec 08 '17 at 12:25
  • you are not defining the red correctly, check this answer on how do you do that https://stackoverflow.com/questions/38093760/how-to-access-a-dom-element-in-react-what-is-the-equilvalent-of-document-getele/38093981#38093981 – Shubham Khatri Dec 08 '17 at 12:37
  • Could you send the full code to the component? – codejockie Dec 09 '17 at 13:49

1 Answers1

0

In this part you just need to place your ref.

<Scrollbars
  ref={(scrollbar) => { this.scrollbar = scrollbar; }}

Then you can use the ref to do your stuff.

scrollTop (value) => {
  this.scrollbar.scrollTop(value);
}
Arnold Gandarillas
  • 3,896
  • 1
  • 30
  • 36