如何使 Vuetify.js “滚动屏幕”工具栏工作？答案

【问题标题】：How do I make the Vuetify.js "scroll off screen" toolbar work?如何使 Vuetify.js “滚动屏幕”工具栏工作？
【发布时间】：2023-03-21 22:07:01
【问题描述】：

我正在尝试将“滚动屏幕”行为添加到工具栏

代码如下：

https://codepen.io/anon/pen/MrONGb

<div id="app">
  <v-app id="inspire">
    <v-content>
      <v-toolbar
      absolute
      color="teal lighten-3"
      dark
      scroll-off-screen
    >
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title>Title</v-toolbar-title>
    </v-toolbar>
      <div style="height:1500px"></div>
    </v-content>
  </v-app>
</div>

example page 上面写着：

对于这个例子，有一个特殊的标记，在你的申请。

但我究竟不需要什么？如何使这段代码工作？

【问题讨论】：

标签： vuetify.js

【解决方案1】：

你应该添加工具栏属性：scroll-threshold="1" scroll-off-screen="true"

【讨论】：

【解决方案2】：

您需要在v-toolbar 组件上添加fixed 和app 道具（删除absolute 道具）

【讨论】：

是的，我明白了，我添加了它是为了让人们可以向下滚动并看到它不起作用，工具栏不会回来，直到你一直滚动回来
@Un1 更新了，试试
啊，现在可以了。即使没有app，只需添加fixed 即可，谢谢
我建议修改答案，去掉“app”，因为没有必要。
@cosan 感谢您的意见。我不确定 op 是否修改了原始的 codepen？因为我看到它是fixed 属性。我很确定在发布问题时需要app，因为在使用其他一些组件时，一些额外的计算需要该属性。一般来说，我相信你会想在你的主工具栏、侧边栏和页脚等上包含app。或者可能是最近版本的 vuetify 发生了一些变化，我不确定，因为我没有测试这个功能后记.