jb-infinite-scroll v1.2.2

jb-infinite-scroll

Infinite scroll web-component with additional features including:

• custom list ui
• empty list state and custom empty list ui
• end of the list state
• enable/disable scroll capture
• support loading state with customizable ui

Demo in codepen: https://codepen.io/javadbat/pen/EaYGGEo

using with JS frameworks

to use this component in react see jb-infinite-scroll/react;

installation

 import "jb-infinite-scroll" from jb-infinite-scroll;

usage

  <jb-infinite-scroll></jb-infinite-scroll>

show content

you can show your content by placing any element with slot attribute slot="content" like the example below:

    <jb-infinite-scroll>
        <div slot="content">
            <div>item 1</div>
            <div>item 2</div>
            <div>item 3</div>
        </div>
    </jb-infinite-scroll>

add scroll callback

you can add your onscroll callback function to scrollEnd event listener.

if is-loading ,is-list-empty ,is-list-ended or disable-capture-scroll is true the callback function won't be executed.

    const InfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
    jbInfiniteScroll.addEventListener('scrollEnd',() => {
        //load your content here
        console.log('scroll');
    })

set loading

you can show loading by setting is-loading ="true" attribute or isLoading property.

    const jbInfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
    jbInfiniteScroll.isLoading = true;

you can also set your own loading ui by adding a slot with slot="loading" like the example below:

    <jb-infinite-scroll is-loading="true">
        <div slot="loading">
            <p>your loading</p>
        </div>
    </jb-infinite-scroll>

set list empty

if there is no data to show you can set is-list-empty = "true".

    const jbInfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
    jbInfiniteScroll.isListEmpty = true;

you can set your own empty list ui by adding a slot with slot="empty" like the example below:

    <jb-infinite-scroll is-list-empty="true">
        <div slot="empty">
            <p>list is empty</p>
        </div>
    </jb-infinite-scroll>

set list ended

if there is no more data to show you can set is-list-ended = "true".this disables scroll capturing and scrollEnd event won't be called after.

    const jbInfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
    jbInfiniteScroll.isListEnded = true;

    <jb-infinite-scroll is-list-ended="true">
    </jb-infinite-scroll>

disable scroll capture

in some cases if you want to disable capture scroll you can set disable-capture-scroll = "true"'

    const InfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
    InfiniteScroll.disableCaptureScroll = true;

state-change-waiting-behavior

by default state-change-waiting-behavior is FORCE_WAIT thats means when an scroll event fires,scroll is not captured until one of the is-loading ,is-list-empty ,is-list-ended states updates. if you want to change this behavior you can set state-change-waiting-behavior to NO_WAIT. that means the scroll callback in not dependent on is-loading,is-list-empty,is-list-ended state update.

we do this to prevent multiple call for one scroll to the end, because in most cases you would set some loading or list ended state or list is empty state after the scroll end called. but if you want to handle states by yourself and not use our state manager mechanism you can just set this to NO_WAIT to handle everything by yourself

usage overview

    <jb-infinite-scroll is-list-empty="true" is-loading="true">
        <div slot="content">
            <div>item 1</div>
            <div>item 2</div>
            <div>item 3</div>
        </div>
        <div slot="empty">
            <p>list is empty</p>
        </div>
        <div slot="loading">
            <p>loading</p>
        </div>
    </jb-infinite-scroll>

styling

you can use ::part to apply style on our web-component part

jb-infinite-scroll::part(content-wrapper){
  display:'flex'
}
jb-infinite-scroll:states(loading)::part(loading-wrapper){
  background:red;
}

we have content-wrapper, loading-wrapper, empty-list-wrapper, default-loading as a supported part in our component. you can also combine them with loading, empty states for different style in different states. if you want to style default loading see jb-loading styling section.

Other Related Docs:

• see jb-infinite-scroll/react if you want to use this component in react.

• see All JB Design system Component List for more components.

• use Contribution Guide if you want to contribute in this component.