CODEWITHSUNDEEP
vuejs2vuetify.js
MMMTroy
MMMTroy

Reputation: 1267

How To Trigger Scrolling Techniques to Bring Back the Toolbar when using Vuetify

I'm using Vuetify's toolbar scrolling techniques feature on a SPA that needs to scroll to the top of a container between each page transition. When I trigger this via javascript using scrollTop, the scroll works fine, but it doesn't seem to let Vuetify know that a scroll up has occurred and as a result the primary toolbar is missing. If a particular page isn't long enough to require a scroll, it becomes impossible to regain the primary toolbar.

Any suggestions on how I can scroll the user to the top of the container from javascript AND have Vuetify move the primary toolbar back into place would be much appreciated.

<v-toolbar :scroll-off-screen="true" :scroll-target="'#scrolling-techniques'">

https://codepen.io/developerplus/pen/mBbjBq

I've attached a codepen link demonstrating the issue. Once scrolled down to the bottom of the container, if the "Scroll to Top" button is clicked, i'd expect it to both take me to the top of the container, and reveal the primary menu.

Upvotes: 0

Views: 3307

Answers (1)

MMMTroy
MMMTroy

Reputation: 1267

I found a solution to my question. If you refer to the codepen in the question, you'll notice the example is now working. What was required was the following: 

let event = new CustomEvent('scroll')
container.pageYOffset = 0
setTimeout(() => {
  container.scrollTop = 0
})
container.dispatchEvent(event)

Upvotes: 1

Related Questions