[Bug Report][3.5.1] Bounce on scroll to bottom of the page with VAppBar set with scroll-behavior="hide"

[lucie1704]

Environment

Vuetify Version: 3.5.1
Vue Version: 3.4.7
Browsers: Chrome 120.0.0.0
OS: Windows 10

Steps to reproduce

Make a layout with v-app-bar with scroll-behavior="hide" and a scrollable v-main and scroll to bottom of the page, you will see it bounces back up. If you don't see it on the first try scroll up and back down again.

Expected Behavior

When scrolling to bottom of the page, stays at the bottom with v-app-bar hidden

Actual Behavior

Bounces back up, cannot scroll to bottom

Reproduction Link

https://play.vuetifyjs.com/#...

[YummyHOF]

To actually reproduce the bug, you must reach the bottom of the page before the app-bar hides (during the animation). After it has successfully hide itself, there will be no problem.

[johnleider]

It's easier to reproduce with more elements: https://play.vuetifyjs.com/#eNqNU0uP2jAQ/isjn3ECu92uhGi1PbTXlaremh4cPIC38UO2E0CI/77jJAQvXFZCwDy/RyZ/Tyz4dfnDuaJrkS3ZKqJ2jYj4vTIAq4434mjbCB433yomnKsYrBsRAkXetkaihPGXa1mxfqwfpF5eCw9h7W3T8Bp3olPW09xOSUxrbNOHW49H3qjtLqLhD1QwQuMAlhZcd5bTUspMOIbWbkVU1nDpxR79UAHAgxNGcsrvbHdNe6Gay/8PFKTw/wcGl7JDr4VBEy+JkdmIM/Zl9O645ES1UGNAwKOFkm8aPED64kSm1QYEWWH4mlDRw1sbotocx/DKLMRjk5hoReowebeEx/ncHW5IEbBUHXR80+s0oAwsnrNn6ARffAUt+APs+dMc6i0nM9BAxEOcYKdtALU9wOkEBs7nCaIkjMyFJDQXvrE2acnNJgb0KC9+Dg0Zq1vZE/6v19c/P39foYbJ4VYpHI6VwlWZ3TGbMaWd9ZGYueItWEOHfkoz1VgIFVtCn0k5ehNSTIcaowvLslxLQ2MSG9X5wmAsjdPlC7WVvjVRaeTS6pfH4kvxTFaEmKcLDJrX3u4DelpSsVkGk0R+AmrsJISnYjEgjClSXIcEcbe6JDy6eu6R3k2fTPycopuxXNVN6U5ZQqejoA87z1g/SNb3pNm/dxNEcYY=

[alihardan]

Workaround:

<script setup>
const appBarModel = ref(true);
const lastScrollY = ref(0);
window.addEventListener("scroll", () => {
  const r = window.scrollY || document.documentElement.scrollTop;
  (appBarModel.value = r < lastScrollY.value),
    (lastScrollY.value = r <= 0 ? 0 : r);
});
</script>

<template>
  <v-app-bar color="primary" v-model="appBarModel" />
</template>

Edit: Sorry, it doesn't work as I expected.

[andrew-lyashenko]

Hi everyone! I see the problem still exists. By checking node-modules I see that the fix is there, but on the attached video you can see the behaviour of the page.

I may have missed something, any help would be appreciated.

Chrome 127.0.6533.120
Vuetify 3.6.14
Nuxt 3.10.3
OS Sonoma 14.5 (M2)

<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">{{ i }}</v-col>
      </v-row>
    </v-container>
  </v-main>
</v-app>

Screen.Recording.2024-08-15.at.20.04.51.mov