Skip to content

feat: lvt-scroll-away support data-lvt-target="window" / page-level scroll #104

Description

@adnaan

Context

client#102 shipped `lvt-scroll-away="top"` (PR #103), enabling scroll-to-top buttons targeting a discrete scrollable container via `data-lvt-target="#scroll-id"`. However, page-level scroll (most commonly: the document body) cannot be addressed by the current target syntax.

Requirements

`lvt-scroll-away` should accept a sentinel target meaning "the viewport/page scroll":

```html
Scroll to top
```

Implementation considerations:

  • `resolveTarget` (in `dom/reactive-attributes.ts`) currently supports only `#id` and `closest:sel` — needs a `window` / `document` keyword
  • Scroll source for window: listen on `window` (the only element that fires page scroll events), read `window.scrollY` for top-edge distance and `document.documentElement.scrollHeight - window.innerHeight - window.scrollY` for bottom-edge distance
  • The `scroll-away.ts` handler currently does `target.scrollTop`/`target.scrollHeight` — needs branching when target is window
  • `scroll-away.ts` event listener attaches to `target` directly — needs branching to attach to `window` when target is window

Use case

The original Pattern #10 (Infinite Scroll) intent in livetemplate/livetemplate examples uses page-level scroll, so a page-level scroll-to-top button is the natural fit — but currently impossible without wrapping the list in an `overflow: auto` container, which changes the pattern's UX.

Workaround

Until this lands, use a discrete scrollable container with explicit `overflow: auto` and `max-height` styling, then target it by id.

Related

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions