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.

user1 · Accepted Answer · 2021-05-19T20:31:17.053

21

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"'.

edited May 19 '21 at 20:31

answered Jan 10 '20 at 22:46

user1

599
1
3
20

1

I have similar setup. it works for chrome. Doesn't work on ie. any suggestions? – Ankur Marwaha May 18 '21 at 17:34
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. – user1 May 19 '21 at 20:32
Works for edge, but doesn't work for ie11. and the inverse scroll also doesn't work for ie11 – Ankur Marwaha May 20 '21 at 17:25
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. – user1 May 21 '21 at 20:07
perfectly works! thanks – Sharvani Jan 05 '22 at 09:22
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. – Benur21 Nov 17 '22 at 10:08
1

@Benur21 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. – user1 Nov 22 '22 at 00:58
1

Thank you. It worked for me after adjusting the height to pixel . percentage didnt worked for me
– jfk Jan 13 '23 at 20:50

React InfiniteScroll in a scrollable component on the page

1 Answers1

Linked