Skip to content

fix(navscroll): do not auto-scroll to first section on page load#675

Open
giulio-leone wants to merge 1 commit into
italia:mainfrom
giulio-leone:fix/597-navscroll-auto-scroll
Open

fix(navscroll): do not auto-scroll to first section on page load#675
giulio-leone wants to merge 1 commit into
italia:mainfrom
giulio-leone:fix/597-navscroll-auto-scroll

Conversation

@giulio-leone

Copy link
Copy Markdown
Contributor

Problem

When a page containing <it-navscroll> loads, it auto-scrolls to the first section anchor. This is jarring and unexpected for users who want to see the top of the page.

Root cause: NavscrollStore.init() programmatically sets the first item as selected, and the #initViewScrollerSubscription() reacts to every selected emission by calling ViewportScroller.scrollToAnchor(). The init emission is indistinguishable from a user-initiated selection.

Solution

Add skip(1) after filter(Boolean) in the scroll subscription pipeline. This ignores the first truthy emission (the programmatic init selection) while preserving scroll behavior for all subsequent user-initiated selections.

// Before
this.#store.selected.pipe(
  filter(Boolean),
  delay(0),
  tap(({ href }) => this.#scroller.scrollToAnchor(href))
).subscribe();

// After
this.#store.selected.pipe(
  filter(Boolean),
  skip(1),  // ignore the programmatic init selection
  delay(0),
  tap(({ href }) => this.#scroller.scrollToAnchor(href))
).subscribe();

Testing

  • Added navscroll.component.spec.ts with 5 tests including:
    • ✅ Verifies scrollToAnchor is not called on initial load
    • ✅ Renders all section headings
    • ✅ Displays header text
    • ✅ Renders nav links for each item
  • Full test suite: 114/114 SUCCESS

Closes #597

⚠️ This reopens #631 which was accidentally closed due to fork deletion.

The selected observable subscription in #initViewScrollerSubscription
used to scroll to the first section immediately on init because
NavscrollStore.init() programmatically sets the first item as selected.

Add skip(1) after filter(Boolean) to ignore the initial programmatic
selection and only scroll on subsequent user-initiated selections.

Closes italia#597

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

pagina che "scrolla" in automatico in presenta di menu di navigazione

1 participant