-
+
@@ -693,12 +692,6 @@ const CHAPTERS: DemoSection[] = Array.from({ length: 30 }, (_, i) => {
`,
styles: [
`
- .scroll-page {
- height: 30rem;
- overflow-y: auto;
- border: var(--tedi-borders-01) solid var(--card-border-primary);
- border-radius: var(--card-radius-rounded);
- }
.scroll-page__grid {
display: grid;
grid-template-columns: 1fr 16rem;
@@ -715,6 +708,8 @@ const CHAPTERS: DemoSection[] = Array.from({ length: 30 }, (_, i) => {
.scroll-page__section p {
margin: 0.25rem 0 0;
}
+ /* The content scrolls above the static bar, so the scrollbar ends
+ before it. */
.mobile-shell {
display: flex;
flex-direction: column;
@@ -734,22 +729,25 @@ class TocStickyDemoComponent implements OnDestroy {
readonly lorem = LOREM;
readonly activeId = signal(CHAPTERS[0].id);
- // Resolves to whichever layout is rendered — the desktop scroll box or the
- // mobile scroll area.
+ // Resolves to whichever layout is rendered — the desktop grid or the mobile
+ // scroll area.
private readonly page = viewChild>("page");
+ // Mobile scroll area; on desktop the window scrolls, so this is undefined.
+ private readonly scroller = viewChild>("scroller");
private readonly platformId = inject(PLATFORM_ID);
private seeking = false;
private seekTimeout?: ReturnType;
private observer?: IntersectionObserver;
constructor() {
- // Re-attach the scroll-spy to the active scroll container whenever the
- // layout swaps between the desktop sidebar and the mobile collapsible.
+ // Re-attach the scroll-spy to the rendered sections whenever the layout
+ // swaps between the desktop sidebar and the mobile collapsible.
effect(() => {
- const root = this.page()?.nativeElement;
+ const page = this.page()?.nativeElement;
+ const root = this.scroller()?.nativeElement ?? null;
this.observer?.disconnect();
- if (root && isPlatformBrowser(this.platformId)) {
- this.observeSections(root);
+ if (page && isPlatformBrowser(this.platformId)) {
+ this.observeSections(page, root);
}
});
}
@@ -759,28 +757,35 @@ class TocStickyDemoComponent implements OnDestroy {
clearTimeout(this.seekTimeout);
}
- // Smooth-scroll the active scroll container to the clicked section; guard the
- // observer during the scroll so the marker doesn't flicker through sections.
+ // Smooth-scroll the window (desktop) or the scroll area (mobile) to the clicked
+ // section; guard the observer during the scroll so the marker doesn't flicker
+ // through sections. `scrollTo` rather than `scrollIntoView`, which would also
+ // scroll the Storybook docs page around the iframe.
selectSection(id: string, event: Event): void {
event.preventDefault();
- const root = this.page()?.nativeElement;
- const target = root?.querySelector(`#${id}`);
- if (!root || !target) return;
+ const target = this.page()?.nativeElement.querySelector(
+ `#${id}`,
+ );
+ if (!target) return;
this.seeking = true;
this.activeId.set(id);
clearTimeout(this.seekTimeout);
this.seekTimeout = setTimeout(() => (this.seeking = false), 700);
- root.scrollTo({
- top:
- root.scrollTop +
- target.getBoundingClientRect().top -
- root.getBoundingClientRect().top,
- behavior: "smooth",
- });
+ const root = this.scroller()?.nativeElement;
+ const offset = target.getBoundingClientRect().top;
+ if (root) {
+ root.scrollTo({
+ top: root.scrollTop + offset - root.getBoundingClientRect().top,
+ behavior: "smooth",
+ });
+ } else {
+ window.scrollTo({ top: window.scrollY + offset, behavior: "smooth" });
+ }
}
- // Scroll-spy: highlight the chapter currently in view within `root`.
- private observeSections(root: HTMLElement): void {
+ // Scroll-spy: highlight the chapter currently in view within `root` (the
+ // viewport when null).
+ private observeSections(page: HTMLElement, root: HTMLElement | null): void {
const ids = this.chapters.flatMap((c) => [
c.id,
...(c.children ?? []).map((child) => child.id),
@@ -789,8 +794,10 @@ class TocStickyDemoComponent implements OnDestroy {
const pickActive = () => {
if (this.seeking) return;
- const atBottom =
- root.scrollTop + root.clientHeight >= root.scrollHeight - 2;
+ const atBottom = root
+ ? root.scrollTop + root.clientHeight >= root.scrollHeight - 2
+ : window.innerHeight + window.scrollY >=
+ document.documentElement.scrollHeight - 2;
if (atBottom) {
this.activeId.set(ids[ids.length - 1]);
return;
@@ -813,7 +820,7 @@ class TocStickyDemoComponent implements OnDestroy {
);
this.observer = observer;
ids.forEach((id) => {
- const el = root.querySelector(`#${id}`);
+ const el = page.querySelector(`#${id}`);
if (el) observer.observe(el);
});
}
@@ -830,8 +837,8 @@ const STICKY_LAYOUT_SOURCE = `@Component({
TextComponent,
],
template: \`
-
+