diff --git a/nojs/SKILL.md b/nojs/SKILL.md index 6109095..23c3b3e 100644 --- a/nojs/SKILL.md +++ b/nojs/SKILL.md @@ -215,7 +215,7 @@ Special variables: `$event` (native Event), `$el` (current element). | `then` | `then="expr"` | Expression to run on success | | `error-boundary` | `error-boundary="tplId"` | Catch errors in subtree | -**Pagination**: `get-trigger="scroll"` (infinite) or `"button"` (load more), `get-insert="append"`, `get-page="1"` (offset) or `get-cursor` + `get-cursor-field` (cursor), `get-threshold="200"` (scroll px). +**Pagination**: `get-trigger="scroll"` (infinite) or `"button"` (load more), `get-insert="append"`, `get-page="1"` (offset) or `get-cursor` + `get-cursor-field` (cursor), `get-threshold="200"` (scroll px). Observer root is the nearest scrollable ancestor (`overflow-y: auto|scroll`), falling back to the viewport; `get-threshold` is relative to that container. A not-yet-overflowing container triggers loads until content fills it (fill-until-overflow). URLs support interpolation: `get="/users/{userId}"`. Reactive expressions in URLs automatically re-fetch. diff --git a/nojs/references/directives/http.md b/nojs/references/directives/http.md index ddf6759..edf31ba 100644 --- a/nojs/references/directives/http.md +++ b/nojs/references/directives/http.md @@ -444,10 +444,10 @@ Controls when the GET request fires. | Value | Behavior | |-------|----------| | (absent) | Fetches immediately on mount (default `get` behavior) | -| `visible` | Fetches when element enters viewport via IntersectionObserver | +| `visible` | Fetches when element becomes visible in its scroll container via IntersectionObserver | | `hover` | Fetches on first `mouseenter` event | | `none` | Suppresses auto-fetch; use `.refresh()` to trigger manually | -| `scroll` | Infinite scroll — fetches next page when sentinel enters viewport. Requires `get-insert` | +| `scroll` | Infinite scroll — fetches next page when sentinel becomes visible in the scroll container. Requires `get-insert` | | `button` | Renders a "Load More" button. Requires `get-insert` | ```html @@ -559,8 +559,12 @@ IntersectionObserver `rootMargin` for `scroll` and `visible` triggers. Controls how early the trigger fires. Default: `200px` for `scroll`, `0px` for `visible`. +**Observer root:** The IntersectionObservers used by `get-trigger="scroll"` (sentinel observer) and `get-trigger="visible"` -- as well as the fallback observer used when `get-trigger="scroll"` is set without an insert mode -- all resolve the nearest ancestor element with computed `overflow-y: auto` or `overflow-y: scroll` as the observer root. If no scrollable ancestor is found, the document (viewport) is used. Because the root is the scroll container, `get-threshold` is relative to that container's bounds, not the browser viewport. + +**Fill-until-overflow:** When `get-trigger="scroll"` targets a container that has not yet overflowed (content is shorter than the container), the sentinel is immediately visible within the scroll container. This causes successive loads until content grows enough to push the sentinel out of view -- correct infinite-scroll semantics. Once the container overflows, loads pause and only resume when actual scrolling brings the sentinel back into view. + ```html - +