Options
Type:
string|Element
Default: undefined
Required: yesSelector of the item elements that should be appended to the container.
The item elements should live inside the container element.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
...
</div>
let ias = new InfiniteAjaxScroll('.container', {
item: '.item'
})
Type:
string
Default: undefined
Required: yesSelector of the next link. The
href
attribute will be used for the url of the next page. Only a single element should match this selector.<a href="/page/2" class="pager__next">Next</a>
let ias = new InfiniteAjaxScroll(/*..*/, {
next: '.pager__next'
})
Introduced in Infinite Ajax Scroll 3.1.0
Type:
string
Default: undefined
Required: noSelector of the previous link. The
href
attribute will be used for the url of the previous page. Only a single element should match this selector.<a href="/page/1" class="pager__prev">Prev</a>
<span class="pager__current">2</span>
<a href="/page/3" class="pager__next">Next</a>
let ias = new InfiniteAjaxScroll(/*..*/, {
next: '.pager__next',
prev: '.pager__prev'
})
Type:
boolean|string|Element
Default: false
Required: noSelector of the elements that contain the pagination. The elements that match the selector will be hidden (
element.style.display
-> none) when Infinite Ajax Scroll binds.The pagination elements will be restored (
element.style.display
-> original value) when unbind
is called.<div class="pager" id="pager1">
<span class="pager__current">1</span>
<a href="/page/2" class="pager__page">2</a>
<a href="/page/3" class="pager__page">3</a>
<a href="/page/2" class="pager__next">Next</a>
</div>
let ias = new InfiniteAjaxScroll(/*..*/, {
// pass pagination as selector:
pagination: '.pager',
// or pass pagination as Element:
pagination: document.getElementById('pager1'),
// or pass false explicitly to disable automatic hiding:
pagination: false,
})
Type:
string
Default: "document"
Required: noType of response. Can be set to "json".
let ias = new InfiniteAjaxScroll(/*..*/, {
responseType: 'json'
})
Type:
boolean
Default: true
Required: noBy default Infinite Ajax Scroll binds to the scroll and resize events on document ready. If you want to have manual control over this behaviour you can set this option to
false
. To bind manually you can call the bind
method.Type:
string|Element|window
Default: window
Required: noSet a selector of the element you want to use as a scroll container. Use this if you want infinite scroll inside an overflow element.
Note: Only a single element should match the selector.
<div id="scroller">
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</div>
let ias = new InfiniteAjaxScroll('.container', {
scrollContainer: '#scroller'
})
Type:
int
(pixels)
Default: 0
Required: noBy default Infinite Ajax Scroll starts loading new items when the user scrolls to the bottom of the last item. The negativeMargin (in pixels) will be subtracted from the items' offset, allowing you to load new pages sooner.
This value is always transformed to a positive integer (a value of
-100
will behave the same as 100
)User experience can degrade when new pages are loaded too quickly without visual feedback. Use with caution.
let ias = new InfiniteAjaxScroll(/*..*/, {
// start loading the next page when the user scrolls to (or passed) 400px before the end of the last item
negativeMargin: 400
})
Type:
string|Element|Object|boolean
Default: false
Required: noConfigures a spinner/loader. By default no spinner is configured.
You can set a selector to an element you want to display when Infinite Ajax Scroll is loading the next page.
<div id="spinner1" class="spinner">Loading...</div>
let ias = new InfiniteAjaxScroll(/*..*/, {
spinner: '.spinner',
// alternatively we can pass an Element
spinner: document.getElementById('spinner1'),
})
You can also set advanced spinner options.
let ias = new InfiniteAjaxScroll(/*..*/, {
spinner: {
// element to show as spinner
element: '.spinner',
// delay in milliseconds
// this is the minimal time the loader should be displayed. If loading takes longer, the spinner
// will be shown for the duration of the loading. If the loading takes less then this duration,
// say 300ms, then the spinner is still shown for 600ms.
delay: 600,
// this function is called when the button has to be shown
show: function(element) {
element.style.opacity = '1'; // default behaviour
},
// this function is called when the button has to be hidden
hide: function(element) {
element.style.opacity = '0'; // default behaviour
}
}
})
Type:
string|Element|Object|boolean
Default: false
Required: noConfigures a trigger. By default no trigger is configured.
You can use the selector of an element you want to use as a trigger.
<button id="trigger1" class="trigger">Load more</button>
let ias = new InfiniteAjaxScroll(/*..*/, {
trigger: '.trigger',
// alternatively we can pass an Element
trigger: document.getElementById('trigger1'),
// we can also pass a factory function to create an Element
trigger: function() {
let el = document.createElement('button');
el.innerText = 'Load More...';
document.querySelector('.some_parent_class').appendChild(el);
// we have to return the element so IAS can add the necessary event listeners
return el;
},
})
We can also set advanced trigger options.
let ias = new InfiniteAjaxScroll(/*..*/, {
trigger: {
// element to show as trigger
element: '.trigger',
// pass a function which returns true which determines if the load more button should be shown
when: function(pageIndex) {
return true; // default behaviour (always show a trigger)
},
// this function is called when the button has to be shown
show: function(element) {
element.style.opacity = '1'; // default behaviour
},
// this function is called when the button has to be hidden
hide: function(element) {
element.style.opacity = '0'; // default behaviour
}
}
})
Configure an event logger.
let ias = new InfiniteAjaxScroll(/*..*/, {
logger: true
})
To disable the logger you can pass
false
:let ias = new InfiniteAjaxScroll(/*..*/, {
logger: false
})
To create your own logger, pass an object:
let ias = new InfiniteAjaxScroll(/*..*/, {
logger: {
next: (event) => {
doSomething(event.pageIndex);
},
loaded: (event) => {
doSomethingElse(event.url);
}
}
})
Type:
boolean
Default: true
Required: noConfigures if the next/previous page should automatically be loaded when the users scrolls to the bottom or the top of the page.
let ias = new InfiniteAjaxScroll(/*..*/, {
loadOnScroll: false
})
// the hit event is still emitted, allowing to manually load the next page
ias.on('hit', (event) => {
ias.next();
})
Type:
boolean
Default: true
Required: noWhen enabled, and the content is shorter than the scroll container, Infinite Ajax Scroll will load the next page(s) until the content is taller than the scroll container. When disabled the responsibility to load the next page is in the hands of the developer. This can be done by calling
next
manually.let ias = new InfiniteAjaxScroll(/*..*/, {
prefill: false
})
// load first page
// notice: even with the first page loaded, the content could still be too short. In that case keep calling `next()` until there is scroll bar.
ias.next();
Last modified 1mo ago