带有滚动屏幕道具的工具栏未显示在页面顶部

Posted 2023-02-22

【中文标题】带有滚动屏幕道具的工具栏未显示在页面顶部

【英文标题】：Toolbar not showing on top of the page with scroll-off-screen prop

【发布时间】：2020-10-28 01:39:25

【问题描述】：

我正在尝试为页面添加v-toolbar，我希望工具栏即使在滚动时也出现在屏幕上。我尝试使用屏幕外滚动，它确实在滚动时显示工具栏，但是当我在页面顶部时，工具栏消失了。我希望工具栏一直显示，即使我在页面顶部或滚动时也是如此。我正在使用 Vuetify 1.0.5 版。

<template> 
  <div>
    <v-toolbar dense fixed class="main-toolbar" scroll-off-screen>
      <v-layout row wrap>
        <v-flex xs12 md4 class="sub-main-page">
          <v-toolbar-title><a class="toolbar-styling" href="javascript:document.getElementById('section1').scrollIntoView(true);">Section 1</a></v-toolbar-title>
        </v-flex>
        <v-flex xs12 md4 class="sub-main-page">
          <v-toolbar-title><a class="toolbar-styling" href="javascript:document.getElementById('section2').scrollIntoView(true);">Section 2</a></v-toolbar-title>
        </v-flex>
        <v-flex xs12 md4 class="sub-main-page">
          <v-toolbar-title><a class="toolbar-styling" href="javascript:document.getElementById('section3').scrollIntoView(true);">Section 3</a></v-toolbar-title>
        </v-flex>
      </v-layout>
    </v-toolbar>
    <div id="section1">
     <Section1></Section1>
    </div>
    <div id="section1">
     <Section2></Section2>
    </div>
    <div id="section1">
     <Section3></Section3>
    </div>
  </div>    
</template>

<script>
import Section1 from 'views/section1.vue';
import Section2 from 'views/section2.vue';
import Section3 from 'views/section3.vue';

export default 
  components: 
    Section1,
    Section2,
    Section3,
  
;
</script>

【参考方案1】：

fixed 和 scroll-off-screen 属性不适用于 v-toolbar。相反，您应该将这些道具与 v-app-bar 一起使用，而不是 v-toolbar，因为 2.x 中的 latter is deprecated。

将工具栏固定在页面顶部：

<v-app-bar fixed>

demo