Skip to content

Commit 7ccff92

Browse files
authored
fix(VAppBar): inability to scroll to the bottom (#19921)
fixes #19090
1 parent 193301c commit 7ccff92

File tree

2 files changed

+29
-0
lines changed

2 files changed

+29
-0
lines changed

packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,28 @@ describe('VAppBar', () => {
8484
.get('.v-app-bar').should('not.be.visible')
8585
})
8686

87+
it('should hide correctly when scroll to the bottom', () => {
88+
cy.mount(({ scrollBehavior }: any) => (
89+
<VLayout>
90+
<VAppBar scrollBehavior={ scrollBehavior } />
91+
92+
<VMain style="min-height: 300px">
93+
{
94+
Array.from({ length: 7 }, () => (
95+
<div class="pa-16 ma-2 w-50 bg-green text-center">
96+
box
97+
</div>
98+
))
99+
}
100+
</VMain>
101+
</VLayout>
102+
))
103+
.setProps({ scrollBehavior: 'hide' })
104+
.get('.v-app-bar').should('be.visible')
105+
.window().scrollTo('bottom')
106+
.get('.v-app-bar').should('not.be.visible')
107+
})
108+
87109
it('collapses', () => {
88110
cy.mount(({ scrollBehavior }: any) => (
89111
<VLayout>

packages/vuetify/src/composables/scroll.ts

+7
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export function useScroll (
4444
) {
4545
const { canScroll } = args
4646
let previousScroll = 0
47+
let previousScrollHeight = 0
4748
const target = ref<Element | Window | null>(null)
4849
const currentScroll = shallowRef(0)
4950
const savedScroll = shallowRef(0)
@@ -71,6 +72,12 @@ export function useScroll (
7172
previousScroll = currentScroll.value
7273
currentScroll.value = ('window' in targetEl) ? targetEl.pageYOffset : targetEl.scrollTop
7374

75+
const currentScrollHeight = targetEl instanceof Window ? document.documentElement.scrollHeight : targetEl.scrollHeight
76+
if (previousScrollHeight !== currentScrollHeight) {
77+
previousScrollHeight = currentScrollHeight
78+
return
79+
}
80+
7481
isScrollingUp.value = currentScroll.value < previousScroll
7582
currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value)
7683
}

0 commit comments

Comments
 (0)