#25 - Account dashboard: navbar scrollbar always visible — overlay scrollbar that fades with scrolling, transparent track - Cordy/cairn-site

Cordy commented

2026-09-05 23:24:27 +00:00

Owner

Nikola's report (2026-09-06), in his words: "account dashboard navbar scrollbar always visible; the bar itself should only show up when scrolling, fading in and out nicely, and the scrollbar background should be transparent."

Reading: the account dashboard's navbar (horizontally scrollable on overflow) permanently shows its scrollbar with an opaque track. Desired: no scrollbar at rest; while the user actually scrolls, an overlay thumb fades in over a fully transparent track and fades back out after scrolling stops (macOS-overlay style).

Likely implementation sketch (to be confirmed by mockup):

Track: ::-webkit-scrollbar-track { background: transparent } + Firefox scrollbar-color: <thumb> transparent; thin width.
Fade: a scrolling class toggled by a scroll listener with a ~700ms settle timeout; thumb opacity transitions on it. Pure-CSS alternatives (scrollbar-width: none + custom thumb) and the emerging scrollbar-gutter/overlay options to be weighed during build.
Must not cause layout shift when the bar appears (overlay, not gutter).

Process: mockup first (house rule) — a small HTML mockup of the navbar in both states (at rest / while scrolling) for Nikola's approval before touching account.html. Nikola can supply a reference example if the mockup misreads the intent.

Nikola's report (2026-09-06), in his words: "account dashboard navbar scrollbar always visible; the bar itself should only show up when scrolling, fading in and out nicely, and the scrollbar background should be transparent." Reading: the account dashboard's navbar (horizontally scrollable on overflow) permanently shows its scrollbar with an opaque track. Desired: no scrollbar at rest; while the user actually scrolls, an overlay thumb fades in over a fully transparent track and fades back out after scrolling stops (macOS-overlay style). Likely implementation sketch (to be confirmed by mockup): - Track: `::-webkit-scrollbar-track { background: transparent }` + Firefox `scrollbar-color: <thumb> transparent`; thin width. - Fade: a `scrolling` class toggled by a scroll listener with a ~700ms settle timeout; thumb opacity transitions on it. Pure-CSS alternatives (`scrollbar-width: none` + custom thumb) and the emerging `scrollbar-gutter`/overlay options to be weighed during build. - Must not cause layout shift when the bar appears (overlay, not gutter). Process: **mockup first** (house rule) — a small HTML mockup of the navbar in both states (at rest / while scrolling) for Nikola's approval before touching account.html. Nikola can supply a reference example if the mockup misreads the intent.

Cordy commented

2026-09-06 00:16:27 +00:00

Author

Owner

Scope update (Nikola, 2026-09-06): the same always-visible-scrollbar behaviour shows in three places — the account dashboard rail, the docs sidebar, and the staff console rail. One behaviour, one fix, applied to all three.

On "one global fix": the deployed pages are deliberately self-contained single files (no shared stylesheet), so "global" here means one identical snippet — a small CSS block plus a few lines of JS attached to any element carrying a railscroll class — pasted into all three pages. Same bytes, three files; the snippet also lands in the design system (tokens/components) as the canonical copy.

Implementation approach (shown in the mockup): hide the native scrollbar entirely (scrollbar-width: none / ::-webkit-scrollbar { display: none }) and draw a custom overlay thumb positioned by JS — native scrollbar pseudo-elements cannot animate opacity, a custom thumb fades cleanly and behaves identically in Chrome/Edge/Firefox/Safari. Thumb fades in on scroll, fades out ~700 ms after scrolling settles; track is nothing at all (fully transparent, no layout shift).

Mockup delivered for approval before any page is touched.

Scope update (Nikola, 2026-09-06): the same always-visible-scrollbar behaviour shows in **three** places — the account dashboard rail, the docs sidebar, and the staff console rail. One behaviour, one fix, applied to all three. On "one global fix": the deployed pages are deliberately self-contained single files (no shared stylesheet), so "global" here means **one identical snippet** — a small CSS block plus a few lines of JS attached to any element carrying a `railscroll` class — pasted into all three pages. Same bytes, three files; the snippet also lands in the design system (tokens/components) as the canonical copy. Implementation approach (shown in the mockup): hide the native scrollbar entirely (`scrollbar-width: none` / `::-webkit-scrollbar { display: none }`) and draw a custom overlay thumb positioned by JS — native scrollbar pseudo-elements cannot animate opacity, a custom thumb fades cleanly and behaves identically in Chrome/Edge/Firefox/Safari. Thumb fades in on scroll, fades out ~700 ms after scrolling settles; track is nothing at all (fully transparent, no layout shift). Mockup delivered for approval before any page is touched.