使用 Vuetify 时如何触发滚动技术以恢复工具栏

Question

我在 SPA 上使用 Vuetify 的工具栏滚动技术功能，需要在每次页面转换之间滚动到容器的顶部。当我使用 scrollTop 通过 javascript 触发它时，滚动工作正常，但它似乎没有让 Vuetify 知道发生了向上滚动，因此主工具栏丢失了。如果特定页面的长度不足以需要滚动，则无法重新获得主工具栏。

任何关于如何将用户从 javascript AND 滚动到容器顶部的建议让 Vuetify 将主工具栏移回原位将不胜感激.

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

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

我附上了演示该问题的代码笔 link。向下滚动到容器底部后，如果单击 "Scroll to Top" 按钮，我希望它既会带我到容器顶部，又会显示主菜单。

Answer 1

我找到了问题的解决方案。如果您参考问题中的 codepen，您会注意到该示例现在正在运行。需要的是以下内容：

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

使用 Vuetify 时如何触发滚动技术以恢复工具栏

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

vuejs2

vuetify.js