Crafted in TypeScript and designed for pure JavaScript, this lightweight library was born from the frustration of complex, unreliable alternatives.
With only a single dependency on events
it delivers flawless, plug-and-play infinite scrollingโno frameworks, no fuss, just effortless scrolling. โจ
Install via npm:
npm i pure-infinite-scroll
Or download the file manually:
To include it directly in HTML:
<script src="pure-infinite-scroll.umd.cjs"></script>
Or use CDN:
<script src="https://unpkg.com/pure-infinite-scroll@1/dist/pure-infinite-scroll.umd.cjs"></script>
-
Create a scrollable container in HTML:
<div id="wrapper"> <div></div> <div></div> <div></div> </div>
-
Set up infinite scroll in JavaScript:
// Reference the scrollable container const wrapper = document.getElementById('wrapper'); // Initialize Pure Infinite Scroll const infiniteScroll = new PureInfiniteScroll(wrapper); // Listen for the "scrolledBottom" event infiniteScroll.on('scrolledBottom', () => { // Fetch and append additional content });
For a more customized setup, you can pass additional parameters:
<div id="wrapper">
<div id="element">
<div></div>
<div></div>
<div></div>
</div>
</div>
const wrapperElement = document.getElementById('wrapper');
const element = document.getElementById('element'); // Optional, if wrapper contains content directly
const infiniteScroll = new PureInfiniteScroll(
wrapperElement,
element,
50, // Event trigger threshold
[InfiniteScrollEvent.ScrolledTop] // Event list to handle
);
infiniteScroll.on(InfiniteScrollEvent.ScrolledTop, () => {
// Handle the scroll event at the top
});
For a full example, check out ./example/index.html
. Clone the repo and open this file in your browser.
Supported Browsers | Minimum Version |
---|---|
Chrome | 26+ |
Firefox | 14+ |
Safari | 6.1+ |
Edge | 12+ |
Internet Explorer | โ Not supported |
To build the project:
npm build
To run tests:
npm test