React InfiniteScroll in a scrollable component on the page

Question

I am trying to build an infinite scroll in a div with a fixed height and a scroll attached to it, so my goal is for the window not to move but a component within to have a scroll and the items within to be added infinatly.

this is what i have so far:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import InfiniteScroll from "react-infinite-scroll-component";

const style = {
  height: 18,
  border: "1px solid green",
  margin: 6,
  padding: 8
};

const DoseListCardBody = () => {
  const [items, setItems] = useState(Array.from({ length: 20 }));

  const fetchMoreData = () => {
    setItems(items.concat(Array.from({ length: 10 })));
  };

  return (
    <div style={{ height: "100%", overflowY: "scroll" }}>
      <InfiniteScroll
        dataLength={items.length}
        next={fetchMoreData}
        hasMore={items.length < 200}
        loader={<h4>Loading...</h4>}
      >
        {items.map((i, index) => (
          <div style={style} key={index}>
            div - #{index}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
};

ReactDOM.render(
  <div style={{ height: "35rem", background: "black" }}>
    <div style={{ height: "30rem", background: "white" }}>
      <DoseListCardBody />
    </div>
  </div>,
  document.getElementById("root")
);

everything works fine if i change

ReactDOM.render(
  <div style={{ height: "35rem", background: "black" }}>
    <div style={{ height: "30rem", background: "white" }}>
      <DoseListCardBody />
    </div>
  </div>,
  document.getElementById("root")
);

to

ReactDOM.render(
  <DoseListCardBody />,
  document.getElementById("root")
);

I think this is because it is using the scroll of the window not the component.

How do i get InfiniteScroll to use the parent component or a component with a scroll that I specify.

I appologise for the bad terminology, i dont usualy develop web pages.

Thud

Answer 1

ok got it!

one must use scrollableTarget as a prop in the InfiniteScroll and specify the ID of the compnent that has the scrollbar.

example:

const DoseListCardBody = () => {
  const [items, setItems] = useState(Array.from({ length: 20 }));

  const fetchMoreData = () => {
    setItems(items.concat(Array.from({ length: 10 })));
  };

  return (
    <div id="scrollableDiv" style={{ height: "100%", overflowY: "scroll" }}>
      <InfiniteScroll
        dataLength={items.length}
        next={fetchMoreData}
        hasMore={items.length < 200}
        loader={<h4>Loading...</h4>}
        scrollableTarget="scrollableDiv"
      >
        {items.map((i, index) => (
          <div style={style} key={index}>
            div - #{index}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
};

notice the addition of 'id="scrollableDiv"' and 'scrollableTarget="scrollableDiv"'.

Thud

I have similar setup. it works for chrome. Doesn't work on ie. any suggestions? – Lorettalorette

Ankur Marwaha - I have just tried it in Edge browser, whitch is the replacment for Internet Explorer and it worked fine, not sure about IE. – Thud

Works for edge, but doesn't work for ie11. and the inverse scroll also doesn't work for ie11 – Lorettalorette

Ah, im not sure about that than, sorry. Unfortunatly we are not longer using InfiniteScroll in our project (not because any limmitations but was not what we wanted at the moment). I whish i could help more. – Thud

perfectly works! thanks – Hazelhazelnut

I wonder if it is a good idea to use ID's in react, since our components should be reusable and that would lead to having multiple ID's in the same page. – Tripp

@Tripp if its just 1 scroll view component on a page and your re using that component on different pages it should be fine, if its the same component being re used multiple times on same page you will run into issues and you will have to deal with that, solutions will vary depending on what you want to do. – Thud

Thank you. It worked for me after adjusting the height to pixel . percentage didnt worked for me <div id="scrollableDiv" style={{ height: 500, overflowY: "scroll" }} > – Schlessel