Context
Identified during patterns example Session 7 polish. The current lvt-scroll-away attribute (introduced in PR #94, shipped v0.8.33) only supports edge="bottom" and toggles the `.visible` class based on distance to bottom of the target.
The original intent (per livetemplate/docs/proposals/patterns.md:2311) included scroll-to-top buttons, but those need the inverse semantics — visible when the user has scrolled DOWN past a threshold (i.e., `scrollTop > threshold`).
Requirements
- Add support for `lvt-scroll-away="top"` — adds `.visible` when `target.scrollTop > threshold`, removes it otherwise
- Reuse the existing `--lvt-scroll-threshold` CSS custom property and `data-lvt-target` plumbing
- Keep `edge="bottom"` semantics unchanged for backwards compatibility
Use case
Scroll-to-top button on long list patterns (e.g., Pattern #10 Infinite Scroll in the patterns example). Currently the patterns example skips this affordance because the existing `edge="bottom"` doesn't fit.
Implementation pointer
`client/dom/scroll-away.ts:64` currently computes:
```ts
const distance = target.scrollHeight - target.scrollTop - target.clientHeight;
if (distance > threshold) { el.classList.add("visible"); }
```
Adding edge="top" requires a switch:
```ts
const past = edge === "bottom"
? target.scrollHeight - target.scrollTop - target.clientHeight
: target.scrollTop;
if (past > threshold) { el.classList.add("visible"); }
```
Plus updating the validation check and any related tests.
Doc drift
Once shipped, fix `livetemplate/docs/proposals/patterns.md:2311` which currently describes the wrong semantics ("based on scroll distance from the top") and the wrong default threshold ("100px" — actual default is 200).
Context
Identified during patterns example Session 7 polish. The current
lvt-scroll-awayattribute (introduced in PR #94, shipped v0.8.33) only supportsedge="bottom"and toggles the `.visible` class based on distance to bottom of the target.The original intent (per
livetemplate/docs/proposals/patterns.md:2311) included scroll-to-top buttons, but those need the inverse semantics — visible when the user has scrolled DOWN past a threshold (i.e., `scrollTop > threshold`).Requirements
Use case
Scroll-to-top button on long list patterns (e.g., Pattern #10 Infinite Scroll in the patterns example). Currently the patterns example skips this affordance because the existing `edge="bottom"` doesn't fit.
Implementation pointer
`client/dom/scroll-away.ts:64` currently computes:
```ts
const distance = target.scrollHeight - target.scrollTop - target.clientHeight;
if (distance > threshold) { el.classList.add("visible"); }
```
Adding edge="top" requires a switch:
```ts
const past = edge === "bottom"
? target.scrollHeight - target.scrollTop - target.clientHeight
: target.scrollTop;
if (past > threshold) { el.classList.add("visible"); }
```
Plus updating the validation check and any related tests.
Doc drift
Once shipped, fix `livetemplate/docs/proposals/patterns.md:2311` which currently describes the wrong semantics ("based on scroll distance from the top") and the wrong default threshold ("100px" — actual default is 200).