CODEWITHSUNDEEP
reactjsscroll
David Casanellas
David Casanellas

Reputation: 855

react-window how to know if its scrolled to bottom

I can't find how to know if one windowed component is scrolled to bottom in here. Is there a property telling where is the scroll relative to the overflowed parent?

Thanks!

Upvotes: 1

Views: 7442

Answers (1)

Mick Vader
Mick Vader

Reputation: 100

From you question I'm assuming you are using the component from the link given.
If so I would add a wrapper div with an onScroll listener to it like so: 

const Row = ({ index, style }) => (
  <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
    Row {index}
  </div>
);

class Example extends Component {
  scrollCheck = event => {
    const bottom = event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight;
    if (bottom) {
      console.log("At The Bottom"); //Add in what you want here
    }
  };

  render() {
    return (
      <Fragment>
        <div onScroll={this.scrollCheck}>
          <List
            className="List"
            height={150}
            itemCount={1000}
            itemSize={35}
            ref={this.listRef}
            width={300}
            id="myDiv"
          >
            {Row}
          </List>
        </div>
      </Fragment>
    );
  }
}

Your question is very similar to here so maybe check that out too.

Upvotes: 2

Related Questions