https://github.com/javadbat/jb-infinite-scroll
infinite scroll web component
https://github.com/javadbat/jb-infinite-scroll
Last synced: 2 months ago
JSON representation
infinite scroll web component
- Host: GitHub
- URL: https://github.com/javadbat/jb-infinite-scroll
- Owner: javadbat
- License: mit
- Created: 2022-09-14T07:35:04.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-17T11:31:51.000Z (4 months ago)
- Last Synced: 2025-04-20T19:18:30.478Z (2 months ago)
- Language: TypeScript
- Size: 36.1 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jb-infinite-scroll
[](https://www.webcomponents.org/element/jb-infinite-scroll)
[](https://raw.githubusercontent.com/javadbat/jb-infinite-scroll/main/LICENSE)
[](https://www.npmjs.com/package/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`](https://github.com/javadbat/jb-infinite-scroll/tree/main/react);
## installation
```js
import "jb-infinite-scroll" from jb-infinite-scroll;
```
## usage
```html
```
## show content
you can show your content by placing any element with slot attribute `slot="content"` like the example below:
```html
item 1
item 2
item 3
```
## 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.
```js
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.
```js
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:
```html
your loading
```
## set list empty
if there is no data to show you can set `is-list-empty = "true"`.
```js
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:
```html
list is empty
```
## 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.
```js
const jbInfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
jbInfiniteScroll.isListEnded = true;
```
```html
```
## disable scroll capture
in some cases if you want to disable capture scroll you can set `disable-capture-scroll = "true"`'
```js
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
```html
item 1
item 2
item 3
list is empty
loading
```
## styling
you can use `::part` to apply style on our web-component part
```css
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](https://github.com/javadbat/jb-loading) styling section.
## Other Related Docs:
- see [jb-infinite-scroll/react](https://github.com/javadbat/jb-infinite-scroll/tree/main/react) if you want to use this component in react.
- see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/main/docs/component-list.md) for more components.
- use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component.