react-custom-scrollbars icon indicating copy to clipboard operation
react-custom-scrollbars copied to clipboard

How to set initial scrollTop value to <Scrollbars> component?

Open umer4ik opened this issue 8 years ago • 4 comments

I need to show Scrollbars with initial top offset, e.g.

<Scrollbars
  onScroll={handleScroll}
  autoHeight
  autoHeightMin={500}
  initialScrollTop={100}
>

Maybe i missed something in docs, but I didn't find any API for this

umer4ik avatar Sep 04 '17 12:09 umer4ik

@umer4ik @akira3500 You can use the internal API:

componentDidMount () {
  const {scrollbar} = this.refs;  // scrollbar has access to the internal API

  scrollbar.scrollTop(100); // 100px
  // or: scrollbar.scrollToBottom();
}

render () {
  <Scrollbars
    ref='scrollbar'
    onScroll={handleScroll}
    autoHeight
    autoHeightMin={500}
  >
    <div/>
  </Scrollbars>
}

You can use any internal API methods from the following list: https://github.com/malte-wessel/react-custom-scrollbars/blob/master/src/Scrollbars/index.js#L97-L211

Or you can use an access to elements using the internal API:

componentDidMount () {
  const {scrollbar} = this.refs;

  scrollbar.view.scrollTop = 100; // view is a <div /> with scrolling
}

You can read more about all elements in the internal API this.

danilvalov avatar Nov 03 '17 10:11 danilvalov

@danilvalov thanks 👍

eyedroot avatar Mar 27 '19 01:03 eyedroot

Hi, firstly let me say thanks very much for the good work you did it here, now please need your assistance is there any way of calculate or knowing the scrollTop value of a div inside ScrollBarCustoms, what I try to do is to set scrollbar position to a predifined place in content like a anchor when user press a button ?

gsi-arturo avatar May 08 '20 17:05 gsi-arturo

Already solve the issue using refs, asking for the offsetTop and setting this value as scrollTop of the ScrollBar component, thanks anyway.

gsi-arturo avatar May 14 '20 14:05 gsi-arturo