fix(VAppBar): inability to scroll to the bottom (#19921)

fixes #19090
vuetifyjs · Jun 11, 2024 · 7ccff92 · 7ccff92
1 parent 193301c
commit 7ccff92
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx b/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx
@@ -84,6 +84,28 @@ describe('VAppBar', () => {
         .get('.v-app-bar').should('not.be.visible')
     })
 
+    it('should hide correctly when scroll to the bottom', () => {
+      cy.mount(({ scrollBehavior }: any) => (
+        <VLayout>
+          <VAppBar scrollBehavior={ scrollBehavior } />
+
+          <VMain style="min-height: 300px">
+            {
+              Array.from({ length: 7 }, () => (
+                <div class="pa-16 ma-2 w-50 bg-green text-center">
+                  box
+                </div>
+              ))
+            }
+          </VMain>
+        </VLayout>
+      ))
+        .setProps({ scrollBehavior: 'hide' })
+        .get('.v-app-bar').should('be.visible')
+        .window().scrollTo('bottom')
+        .get('.v-app-bar').should('not.be.visible')
+    })
+
     it('collapses', () => {
       cy.mount(({ scrollBehavior }: any) => (
         <VLayout>

diff --git a/packages/vuetify/src/composables/scroll.ts b/packages/vuetify/src/composables/scroll.ts
@@ -44,6 +44,7 @@ export function useScroll (
 ) {
   const { canScroll } = args
   let previousScroll = 0
+  let previousScrollHeight = 0
   const target = ref<Element | Window | null>(null)
   const currentScroll = shallowRef(0)
   const savedScroll = shallowRef(0)
@@ -71,6 +72,12 @@ export function useScroll (
     previousScroll = currentScroll.value
     currentScroll.value = ('window' in targetEl) ? targetEl.pageYOffset : targetEl.scrollTop
 
+    const currentScrollHeight = targetEl instanceof Window ? document.documentElement.scrollHeight : targetEl.scrollHeight
+    if (previousScrollHeight !== currentScrollHeight) {
+      previousScrollHeight = currentScrollHeight
+      return
+    }
+
     isScrollingUp.value = currentScroll.value < previousScroll
     currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value)
   }