Question regarding initialScrollY prop

[Sameedkhan25]

as mentioned in the docs if i want to set a scroll position, for example if I have a list of 50 items and want to scroll to the 30th item when the component is render

is there anything I can do for that?

[JoiGud]

I was also trying this in CodeSandbox (https://codesandbox.io/s/hungry-surf-112i3?file=/src/index.js). Doesn't seem to work (or I'm missing something) 😅

[ankeetmaini]

I think you guys are right, it should scroll in the y direction with the value passed.

Problem is this condition, without this it should work just fine.

https://github.com/ankeetmaini/react-infinite-scroll-component/blob/de6e954a7f9c27fe0834eb665f6224e918b6cbef/src/index.tsx#L89

[Sameedkhan25]

@ankeetmaini can you fix that in next release

[axeljeremy7]

https://codesandbox.io/s/eloquent-breeze-5vb4b?file=/src/index.js you have to specify height in the component, to then later set up the initial position

[Sameedkhan25]

@axeljeremy7 well thanks for the response i have tried this in my scenario but its not working in my code I know its strange but your help will be highly appreciated

<InfiniteScroll style={{ overflow: "hidden" }} dataLength={ this.state.tableRows && this.state.tableRows.length } next={ this.state.searchValue ? () => this.searchResult_Next() : () => this.fetchAlertListByFolder( this.props.match.params.folderId, this.state.offset, limit ) } scrollableTarget="scrollableDiv" hasMore={this.state.hasMore} height={300} initialScrollY={500} useWindow={false}

              endMessage={
                <p
                  style={{
                    textAlign: "center",
                    paddingTop: "30px",
                    fontWeight: "bold",
                  }}
                >
                  {!this.state.alertListingDisplay
                    ? NoRightsMessage
                    : this.state.tableRows.length === 0
                    ? NoRecordFound
                    : ""}
                </p>
              }
              loader={
                <div>
                  <center>
                    {" "}
                    <MDBSpinner multicolor />
                  </center>
                </div>
              }
            >
              {this.state.tableRows.length > 0 && (
                <MDBTable
                  sortable={"false"}
                  striped
                  borderless
                  searching={"false"}
                  paging={"false"}
                >
                  <MDBTableHead columns={data.columns} />
                  <MDBTableBody
                    style={{
                      cursor: this.state.isEnableEdit
                        ? "default"
                        : "pointer",
                    }}
                    rows={data.rows}
                  />
                </MDBTable>
              )}
            </InfiniteScroll>

[axeljeremy7]

The initial scroll works like height of the row multiple by a number of how many rows you want to forward. The trick is to know ahead of time the height.

const style = {
  height: 30
};

https://codesandbox.io/embed/eloquent-breeze-5vb4b?file=/src/index.js&codemirror=1

[Sameedkhan25]

@axeljeremy7 i am using mdb react for table, they have pre defined height of rows https://mdbootstrap.com/docs/react/tables/basic/#docsTabsAPI

I am doing the same thing as you described earlier, I am kinda stuck here don't know what to do any type of help is appreciated thanks

[fridaystreet]

also facing this problem, our rows don't have a fixed height per row, it's a chat feed. Really need a way to just pass in the index number of the item in the array we want it scrolled to. ie first unread message might be item 10 in an array of 50, where the remaining 40 are after item 10 (it's in reverse mode).

so we don't want the message list to just appear scrolled to the bottom, we want it to start at message 10 so the user can scroll down to the latest message. every message has a different height, any input on how to achieve that using the index number of the message in the array would be really appreciated.

[Kipitup]

Any news on this?

@fridaystreet what did you end up doing?

[insivika]

@ankeetmaini any update on moving this condition this.el.scrollHeight > this.props.initialScrollY