Interactive

Infinite scroll

A sentinel that fires monsoon:load when it nears the viewport or a scroll container. Append the next items, then call detail.done(), or detail.done(false) at the end. Needs monsoon.js.

Interactive2 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

infinite-scroll.html

<div id="feed-js" class="max-h-64 overflow-y-auto rounded-xl border p-3 grid gap-2 max-w-sm">
  <article class="rounded-lg border bg-surface p-3 text-sm">Post 1</article>
  <article class="rounded-lg border bg-surface p-3 text-sm">Post 2</article>
  <article class="rounded-lg border bg-surface p-3 text-sm">Post 3</article>
  <article class="rounded-lg border bg-surface p-3 text-sm">Post 4</article>
  <div class="infinite-scroll" data-m-infinite-scroll data-m-infinite-scroll-root="#feed-js" data-m-infinite-scroll-end="You are all caught up"><span class="spinner spinner-sm"></span>Loading more posts</div>
</div>

JavaScript API

Attribute

data-m-infinite-scroll

Options

Option	Description
`data-m-infinite-scroll-margin="300px"`
`data-m-infinite-scroll-root="#feed"`
`data-m-infinite-scroll-end="You are all caught up"`

Methods

Method	Description
`Monsoon.infiniteScroll(el).page`
`Monsoon.infiniteScroll(el).reset()`

Events

Event	Description
`monsoon:load { page, done(more = true) }`

Classes

2 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class Type What it does

Class	Type	What it does
	Base	Base class of the infinite scroll. On a <div> in the example. Sets flex display, alignment, gap, height, padding and text size. CSS `.infinite-scroll[data-ended] > .spinner { display: none; } .infinite-scroll:not([data-loading]) > .spinner { visibility: hidden; }`
	Part	Part of the infinite scroll. On a <span> in the example. Sets inline-block display, alignment, width, corner radius, text color and background, and `--tone`, `--spinner-size` and `--spinner-stroke`. CSS @media (prefers-reduced-motion: reduce) { .spinner, .btn-loading::before, .progress:indeterminate { animation-duration: 2.4s; } } .spinner { --tone: currentColor; --spinner-size: 1.5rem; --spinner-stroke: max(2px, calc(var(--spinner-size) / 8)); display: inline-block; flex: none; width: var(--spinner-size); aspect-ratio: 1; border-radius: var(--m-radius-full); color: var(--tone); background: radial-gradient(farthest-side, currentColor 94%, transparent) top / var(--spinner-stroke) var(--spinner-stroke) no-repeat, conic-gradient(transparent 12%, currentColor); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--spinner-stroke)), var(--foreground) calc(100% - var(--spinner-stroke) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--spinner-stroke)), var(--foreground) calc(100% - var(--spinner-stroke) + 1px)); vertical-align: middle; animation: m-spin 0.8s linear infinite; }

Base

Base class of the infinite scroll. On a <div> in the example. Sets flex display, alignment, gap, height, padding and text size.

CSS

.infinite-scroll[data-ended] > .spinner {
  display: none;
}

.infinite-scroll:not([data-loading]) > .spinner {
  visibility: hidden;
}

Part

Part of the infinite scroll. On a <span> in the example. Sets inline-block display, alignment, width, corner radius, text color and background, and --tone, --spinner-size and --spinner-stroke.

CSS

@media (prefers-reduced-motion: reduce) {
  .spinner, .btn-loading::before, .progress:indeterminate {
    animation-duration: 2.4s;
  }
}

.spinner {
  --tone: currentColor;
  --spinner-size: 1.5rem;
  --spinner-stroke: max(2px, calc(var(--spinner-size) / 8));
  display: inline-block;
  flex: none;
  width: var(--spinner-size);
  aspect-ratio: 1;
  border-radius: var(--m-radius-full);
  color: var(--tone);
  background: radial-gradient(farthest-side, currentColor 94%, transparent) top / var(--spinner-stroke) var(--spinner-stroke) no-repeat,
    conic-gradient(transparent 12%, currentColor);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--spinner-stroke)), var(--foreground) calc(100% - var(--spinner-stroke) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--spinner-stroke)), var(--foreground) calc(100% - var(--spinner-stroke) + 1px));
  vertical-align: middle;
  animation: m-spin 0.8s linear infinite;
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Infinite scroll: start from the base class, then add modifiers -->
<div id="feed-js" class="max-h-64 overflow-y-auto rounded-xl border p-3 grid gap-2 max-w-sm">
  <article class="rounded-lg border bg-surface p-3 text-sm">Post 1</article>
  <article class="rounded-lg border bg-surface p-3 text-sm">Post 2</article>
  <article class="rounded-lg border bg-surface p-3 text-sm">Post 3</article>
  <article class="rounded-lg border bg-surface p-3 text-sm">Post 4</article>
  <div class="infinite-scroll" data-m-infinite-scroll data-m-infinite-scroll-root="#feed-js" data-m-infinite-scroll-end="You are all caught up"><span class="spinner spinner-sm"></span>Loading more posts</div>
</div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#JavaScript API

#Classes

#Usage

#Accessibility

#Related components

Example

JavaScript API

Classes

Usage

Accessibility

Related components