Infinite Scroll not working when using custom scrollbar

[JilMuriel]

Hi, I really like this library.

I'm trying to use this library with a custom scrollbar but when scrolling at the bottom the function that loads more data does not work

https://codesandbox.io/s/infinite-scroll-w-custom-scrollbar-igdyk

App Component

import React, { useState } from "react";
import { Scrollbar } from "./Scrollbar";
import InfiniteScroll from "react-infinite-scroll-component";
import "./styles.css";



export default function App() {
  const [atpItems, setAtpItems] = useState(Array.from({ length: 20 }));

  const style = {
    height: 30,
    border: "1px solid green",
    margin: 6,
    padding: 8
  };
  const fetchMoreData = () => {
    // a fake async api call like which sends
    // 20 more records in 1.5 secs
    console.log("atpItems.lengthd", atpItems.length);
    if (atpItems.length <= 50) {
      setTimeout(() => {
        setAtpItems(atpItems.concat(Array.from({ length: 5 })));
      }, 1000);
    } else {
    }
  };
  return (
    <div className="App">
      <h1>Infinite Scroll</h1>
      <Scrollbar>
        <InfiniteScroll
          dataLength={atpItems.length}
          next={fetchMoreData}
          hasMore={true}
          loader={<h4>Loading...</h4>}
          endMessage={
            <p style={{ textAlign: "center" }}>
              <b>Yay! You have seen it all</b>
            </p>
          }
        >
          {atpItems.map((i, index) => (
            <div style={style} key={index}>
              div - #{index}
            </div>
          ))}
        </InfiniteScroll>
      </Scrollbar>
    </div>
  );
}

Scrollbar Component

import React from "react";
// import SimpleBar from 'simplebar-react';
import CustomScroll from "react-custom-scroll";
import "./Scrollbar.css";

interface ScrollBarProps {}

export const Scrollbar: React.FC<ScrollBarProps> = ({ children }) => {
  return (
    <CustomScroll allowOuterScroll heightRelativeToParent="400px">
      {children}
    </CustomScroll>
  );
};

What's the best way to handle this?

[KristenWilde]

I had this issue as well, but a few changes to the css fixed it. If I remember correctly, the important things were:

• Don't set the overflow property of the scrollable element to anything other than 'auto'.
• Don't set the max-height or the max-width. Just setting the 'height' worked for me.

[tomasz-grzesik]

@JilMuriel Have you solve the problem?

[paperfella-ceo]

Same problem

[JilMuriel]

@tomasz-grzesik I was not able to solve It

[gabe2code-opstalent]

You should use min-height: 30 instead of height. That solved the problem on my side