fix(VAppBar): prevent navbar pop-up when reaching page bottom

[woodrush]

Fixes #20352

Description

Issue

Navbar with scroll-behavior="hide" pops back up when reaching page bottom.

Root Cause

When scroll momentum causes the page to hit bottom during the hide animation, the scroll interruption triggers the show logic, causing unwanted bounce.

Additionally, pages with minimal scrollable content also exhibit erratic navbar flickering: #20352 (comment)

Solution

Fix 1: Bottom Detection (Solves large page case)

Detects when bottom is reached while scrolling down and prevents navbar from showing in this specific scenario. This fix alone is sufficient for the reported issue on normal pages.

Fix 2: Short Page Protection (Prevents corruption on small pages)

Disables scroll-hide behavior on pages with <150px or <1.5x threshold scrollable content.

Without this fix: On short pages (see small page test case below), the navbar animation causes the content and footer to tear apart visually, creating unwanted white space between them as the navbar tries to hide despite insufficient scrollable distance.

With this fix: Scroll-hide is automatically disabled on such pages, keeping the layout intact.

Markup:

Example 1: Standard VAppBar (Fix 1)

<template>
  <v-app>
    <v-app-bar
      color="primary"
      scroll-behavior="hide"
      scroll-threshold="100"
    >
      <v-app-bar-title>My App</v-app-bar-title>
    </v-app-bar>

    <v-main>
      <v-container>
        <v-card v-for="i in 20" :key="i" class="mb-4 pa-4">
          <h3>Section {{ i }}</h3>
          <p>Content here...</p>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

Test: Scroll down quickly to bottom.
Expected: Navbar stays hidden (no pop-up).

---

Example 2: Nested VAppBar (Fix 1)

From #20352:

<template>
  <v-app>
    <v-app-bar title="Main Toolbar">
      <template #prepend>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </template>
    </v-app-bar>

    <v-navigation-drawer></v-navigation-drawer>

    <v-main>
      <v-app-bar scroll-behavior="hide" title="Page Toolbar">
        <template #extension>
          <v-tabs>
            <v-tab>Test 1</v-tab>
            <v-tab>Test 2</v-tab>
            <v-tab>Test 3</v-tab>
          </v-tabs>
        </template>
      </v-app-bar>

      <v-container fluid>
        <v-row>
          <v-col v-for="i in 50" :key="i" cols="12">
            <v-card class="pa-4">Section {{ i }}</v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

Test: Fast scroll to bottom in VMain.
Expected: Page Toolbar (with tabs) stays hidden. Main Toolbar unaffected.

---

Example 3: Short Page (Fix 2)

Vuetify Play: Minimal content example (from #20352 comment)

Expected: Navbar stays visible (scroll-hide automatically disabled), preventing the content/footer tear-apart with white space.

[woodrush]

Working on the CI test fix.

[woodrush]

CI passed! Confirmed the fix is working on the example markups. Will squash commits upon request.

[J-Sek]

I have trouble reproducing the problem on examples 1 & 2. Does it require any specific mobile device? Chrome DevTools does not apply overscroll bounce. Tested on Android as well - app bar stays hidden.

Example 3 - I can set the footer to height="127" (1px less than 128px of prominent app bar) and the bouncing is still there.

[woodrush]

Thank you for your feedback. For examples 1 and 2, I confirmed that the issue reproduces on Firefox and Safari. I also confirmed that it doesn't reproduce in Chrome. Below is the environment I'm using:

• macOS Tahoe 26.0.1
• Firefox 144.0 (aarch64)
• Safari 26.0.1 (21622.1.22.11.15)
• Chrome 141.0.7390.108（Official Build） （arm64）

For example 3, I pushed a commit that fixes it by refining the content height calculations. The issue was that when the navbar pops up, it changes the content height. I tested the solution with Chrome, Firefox, and Safari. I confirmed that examples 1 and 2 are fixed for all of these browsers in the new commit as well.

[woodrush]

Here are videos demonstrating the issue and fix:

Before (current Vuetify) - Issue reproduces in Firefox and Safari, but not Chrome:

original_vuetify.mov

After (with this PR's fix) - Working correctly in Firefox, Safari, and Chrome:

fixed_vuetify.mov

[woodrush]

This PR also fixes an issue that's apparent in all browsers including Chrome.

Examples 1 and 2 only reproduced in Firefox and Safari but not in Chrome, but Example 3 appears in all browsers including Chrome. Below are some additional videos demonstrating the issue and fix for Example 3. (The previous comment was for Examples 1 and 2.)

Before (current Vuetify) - Issue reproduces in All browsers: Firefox, Safari, and Chrome:

Notice that the scroll bounces back up hiding the footer, even when it's only scrolling down.

vue-not-fixed.mov

After (with this PR's fix) - Working correctly in all browsers (Firefox, Safari, and Chrome):

vue-fixed.mov

The key here is that navbar hiding is disabled when there is not enough space to hide the navbar. When you try to hide the navbar in this situation, it either:

• Bounces the scroll, or
• Tears the main content and footer apart, creating a white blank space between the red content and green footer regions.

This PR's fix is to disable the navbar hiding in this situation. When the window is resized so that there is enough scrolling space, the navbar will hide when scrolled.

The following video demonstrates this feature. Notice that:

• In the original screen size, the navbar hiding is disabled
• When the screen is sized down to create enough space for hiding the navbar, the navbar hides while scrolling
• When the screen is sized back up again to remove enough space for hiding the navbar, the navbar automatically reappears, and navbar hiding is disabled again

Since the original Example 3 had not enough content size (it had a flexible height), in this video the content size was increased from the original example to provide enough height.

vue-fixed-2.mov