Both are classes on the page's page-content. Infinite scroll (infinite-scroll-content) fires infinite whenever the user scrolls within data-infinite-distance pixels of the bottom (50 by default); add infinite-scroll-top to load older items at the top instead, as a chat does. Pull to refresh (ptr-content, plus a ptr-preloader element) fires ptr:refresh when the page is pulled down past data-ptr-distance, and shows a spinner until you call app.ptr.done():
<div class="page-content ptr-content infinite-scroll-content" data-infinite-distance="400"
@ptr:refresh=${refresh} @infinite=${loadMore}>
<div class="ptr-preloader"><div class="preloader"></div><div class="ptr-arrow"></div></div>Neither component fetches anything. infinite fires on every scroll event inside the zone, so your handler must ignore calls while a request is running, and remove the infinite-scroll-preloader element once everything has loaded. A mouse drag does not pull to refresh; data-ptr-mousewheel="true" enables a trackpad pull, and app.ptr.refresh() triggers it from code, as in the test below.