Infinite Scroll not working when using custom scrollbar
See original GitHub issueHi, 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?
Issue Analytics
- State:
- Created 3 years ago
- Comments:5
Top Results From Across the Web
Infinite scroll doesn't work when scrolled all the way to the end ...
Infinite scroll doesn't work when scrolled all the way to the end of the div · Could you provide the code that executed...
Read more >Scrolling | Angular Material
The scrolling package provides helpers for directives that react to scroll events. link cdkScrollable and ScrollDispatcher. The cdkScrollable directive and ...
Read more >Options - Infinite Scroll
Customize Infinite Scroll with options. ... Disable appending by not setting append , for loading JSON or adding your own append behavior like...
Read more >Perfect Scrollbar
Finally, scroll hooking is generally considered a bad practice, and perfect-scrollbar should be used carefully. Unless custom scroll is really needed, using ......
Read more >ScrollArea - Mantine
ScrollArea component is based on Radix UI scroll area component. It is adapted to work well with light and dark color schemes and...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You should use
min-height: 30
instead ofheight
. That solved the problem on my sideSame problem