The QInfiniteScroll component allows you to load new content as the user scrolls the page.
Usage
Infinite Scroll loads items in advance when less than offset (default = 500) pixels is left to be seen. If the content you fetch has height less than the scroll target container’s height on screen then Infinite Scroll will continue loading more content. So make sure you load enough content.
In your @load function, don’t forget to call the passed in done() function when you have finished loading more data.
Scroll to the bottom to see QInfiniteScroll in action.
Tips
Please read here about how Quasar determines the container to attach scrolling events to.
- Works best when placed as direct child of the Vue component rendering your Page
- If you change the parent of this component, don’t forget to call
updateScrollTarget()on the QInfiniteScroll Vue reference. - If you need to specify the scroll target inner element (because the auto detected one is not the desired one) pass a CSS selector (as string) or the DOM element in the
scroll-targetprop
If you pass a custom scroll target container with scroll-target prop you must make sure that the element exists and that it can be overflowed (it must have a maximum height and an overflow that allows scrolling).
If the scroll target container cannot be overflowed you’ll get a forever loading situation.
Inside a QDialog or any other position: fixed container the page itself cannot act as the scroll target: content rendered there never changes the page’s scroll size, so the component would have no way to decide when to load. Point the scroll-target prop to a scrollable element of the overlay (or wrap the content in one, e.g. with the scroll CSS class and a maximum height); without one, automatic loading stays off in such a placement (the trigger() method still works).
Accessibility v2.25+
Loading is triggered by native scrolling, so keyboard users trigger it too — as long as the scroll target itself can be scrolled with the keyboard (when using a QScrollArea as target, see its Accessibility section).
The loading indicator is not announced to screen readers. If the arrival of new content matters to your users, add text with role="status" inside the loading slot so assistive technology reports that more content is loading.