如何在Vuetify.js中实现滚动时工具栏滑出屏幕但标签页留存？

我之前折腾过v-toolbar的滚动行为，刚好能帮到你！先理清楚两种需求的实现方式：

一、如果你要实现「向下滚动时标签页（工具栏）固定在顶部」 #

这个其实不需要用scroll-toolbar-off-screen，推荐两种实现思路：

方式1：简单固定（始终停在顶部） #

直接给v-toolbar加上app和fixed属性，就能让工具栏牢牢固定在视口顶部，滚动页面时完全不动：

<v-toolbar app fixed>
  <v-toolbar-title>固定顶部的工具栏</v-toolbar-title>
  <!-- 你的标签页内容 -->
</v-toolbar>

方式2：滚动到指定位置后才固定 #

如果想要「页面滚动一段距离后再固定顶部」的效果，需要结合滚动监听和动态样式：

1. 组件内添加滚动监听逻辑：

export default {
  data() {
    return {
      isToolbarFixed: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      // 滚动距离超过100px时触发固定，可自行调整阈值
      this.isToolbarFixed = window.scrollY > 100
    }
  }
}

2. 给v-toolbar绑定动态样式：

<v-toolbar 
  :class="{ 'fixed-top': isToolbarFixed }"
  style="transition: top 0.3s ease;"
>
  <v-toolbar-title>滚动后固定的工具栏</v-toolbar-title>
</v-toolbar>

3. 补充CSS样式：

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

二、如果你要实现「向下滚动时工具栏滑出屏幕」（对应你提到的scroll-toolbar-off-screen属性） #

这个属性没生效的核心原因几乎都是没指定正确的滚动目标，必须配合scroll-target一起使用：

正确使用步骤： #

1. 确保页面内容在可滚动容器内（比如用v-app布局时的v-content），给容器设置唯一ID：

<v-app>
  <v-toolbar 
    scroll-toolbar-off-screen
    scroll-target="#scroll-container"
  >
    <v-toolbar-title>滑出屏幕的工具栏</v-toolbar-title>
  </v-toolbar>

  <!-- 滚动容器，ID要和scroll-target对应 -->
  <v-content id="scroll-container">
    <!-- 足够长的内容，确保能触发滚动 -->
    <div style="height: 2000px;">这里是长内容...</div>
  </v-content>
</v-app>

2. 若不用v-app布局，可自定义滚动容器：

<v-toolbar 
  scroll-toolbar-off-screen
  scroll-target="#custom-scroll"
>
  <!-- 工具栏内容 -->
</v-toolbar>

<div id="custom-scroll" style="height: 100vh; overflow-y: auto;">
  <!-- 长内容 -->
</div>

我当初就是漏加了scroll-target，导致属性完全没反应，补上之后就正常实现「向下滑出、向上显示」的效果了！

内容的提问来源于stack exchange，提问作者Chanlito