Is there any way to programmatically set the scroll bar position?

[bfang711]

Given the element height (all equal height) and the number of total elements (no infiniteloading), can I set the scroll bar position programmatically from the script by giving an element index?

thank you.

[masquel]

@bfang711

import React from "react";
import { findDOMNode } from "react-dom";
import Infinite from "react-infinite";

class Example extends React.Component {
    constructor(props){
        super(props);
        this.inifiniteScrollContainer  = null;
    }
    componentDidMount(){
        const inifiniteScrollContainer= findDOMNode(this.inifiniteScrollContainer);
        if(chatContainer){
            const inifiniteScrollInner= inifiniteScrollContainer.querySelector('div');
            inifiniteScrollInner.scrollTop = 200; // your scroll position
        }
    }
    render(){
        return (
           <Infinite
              ref={ref => this.inifiniteScrollContainer = ref}
              ...
           >
                 ...
           </Inifinite>
        )
    }
}

[bfang711]

@masquel
Are you sure this works? I use the same way but it doesn't work. the scrollbar not changing position at all. I am using Chrome btw.

[masquel]

@bfang711 this example is from my project, so yes, this works. Anyway I need to see your code to understand the problem.
Would be great to see it here - https://codesandbox.io/

[bfang711]

I got this working actually. I don't know the reason, but it works.

$(".infGrid").scrollTop(the offset value);  

where infGrid is defined in className="infGrid".

Thank you very much @masquel

[brunobraga95]

It does not fully work with me,. I am passing as children an array of components, where each one displays a picture, all of them have the same height. When I scroll and check the DOM as I go, I notice that it render 5 children at a time, which is fine.

On componentWillUnmount I save my current scroll position so that when the user comes back it can go back to where he/she left. At this point I check if there is a scroll prop to be set, so I do it.

It does changes the scroll but then the children that appears in the screen is always the last one from the five children (remember I am passing down an array) because of that the bottom of the list I am building always looks empty, it does not look like I am seeing the children in middle. When I scroll down a bit more it does load more pictures, but again..one at a time, therefore it keeps displaying the current picture as if there was nothing after.

  componentWillUnmount() {
    this.props.saveScrollPosition(this.scrollContainerElement.scrollTop);
  }

  getContainerRef = (el) => {
    if (el && !this.scrollContainerElement) {
      this.scrollContainerElement = el.scrollable;
      if (this.props.scrollPosition > 0) {
        this.scrollContainerElement.scrollTop = this.props.scrollPosition;
        this.props.preventSetScroll();
      }
    } else {
      this.scrollContainerElement = null;
    }
  }

   <StyledInfinite
       innerRef={this.getContainerRef}
       containerHeight={containerHeight}
       elementHeight={this.state.cardContainerHeight}
       onInfiniteLoad={this.handleInfiniteLoad}
       infiniteLoadBeginEdgeOffset={this.state.cardContainerHeight}
       isInfiniteLoading={this.props.isLoading}
       loadingSpinnerDelegate={this.renderLoadingComponent()}
     >
        {this.pictureCards}
    </StyledInfinite>

anyone knows why this is happening?

follow up: if I add a delay (1s) before setting the scrollTop it words..which sucks of course.

[bfang711]

@masquel
Here is a sample code to show it. I tried several ways, however none of them works as expected. Please take a look. I showed 3 ways to set scrolltop problematically in DidMount, You can simply uncomment each of them to give it a try.

btw, do you know why it only shows 8 elements, while I set
elementHeight={20} containerHeight={300} suppose to show 15 elements?

https://codesandbox.io/s/yqvr830j5j

thank you.

[worudso]

https://codesandbox.io/s/v1vlz0j293
I added a working example.
It seems it was just a mistake that you set scrollTop of infiniteRef not container.