Skip to content

Quirkkle/Pure-Infinite-Scroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

2 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿš€ Pure Infinite Scroll

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. โœจ


๐Ÿ“ฆ Installation

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>

๐Ÿš€ Basic Usage

  1. Create a scrollable container in HTML:

    <div id="wrapper">
        <div></div>
        <div></div>
        <div></div>
    </div>
  2. 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
    });

โš™๏ธ Advanced Usage with TypeScript

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.


๐ŸŒ Browser Support

Supported Browsers Minimum Version
Chrome 26+
Firefox 14+
Safari 6.1+
Edge 12+
Internet Explorer โŒ Not supported

๐Ÿ›  Development

To build the project:

npm build

To run tests:

npm test

About

๐ŸŒŠ Effortless Infinite Scrolling for Pure JS

Resources

License

Stars

Watchers

Forks

Packages

No packages published