带有Vuetify + Electron的固定标题下方的滚动条

Question

我正在使用Vuetify和Electron制作一个应用程序来帮助我完成某些工作。我禁用了browserWindow框架，并使用按钮关闭窗口使标题成为可拖动区域。我正在使用电子Vuetify模板

vue init vuetifyjs/electron

我的问题是滚动条一直到顶部，但我希望它在固定标题下方。

我曾尝试在html，body，app div和content div标签上使用溢出属性，但是我没有成功。

我将如何完成？

Answer 1

这纯粹是一个 CSS 问题，因为您也可以在具有类似布局的浏览器中看到这种行为。解决此问题的最简单方法是使用 flex 布局：

HTML：

<div class="container">
  <div class="titlebar"></div>
  <div class="content">
    <h1>So much content we scroll</h1>
    <h1>So much content we scroll</h1>
    <!-- etc -->
  </div>
</div>

CSS：

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.titlebar {
  background-color: blue;
  height: 35px;
  flex-shrink: 0;
}

.content {
  flex-grow: 1;
  overflow-x: auto;
}

在此CodePen 中查看此内容

Answer 2

我想为这个问题提供Vuetify的具体答案，无论是否涉及Electron，这都应适用。

Vuetify的默认样式比简单的CSS解决方案所能提供的难度要大一些，尤其是当布局变得更加复杂时。

在这个例子中我使用了复杂的布局从Vuetify的预先定义的主题在这里

Vuetify附带一个溢价-y：在html元素上滚动，因此第一步是为此添加一个替代。

html {
  overflow: hidden;
}

这将消除跨应用程序整个高度的右侧栏。

接下来，您需要将v内容区域设置为可滚动区域。设置此区域时，需要注意一些陷阱：

• Display flex已经声明
• Vuetify在style属性中设置了填充，因此您需要根据情况进行覆盖
• 您需要留出页眉高度的边距（仅当您将页眉高度从64px更改时才重要）
• 您需要使用calc（与上述相同）从内容容器的高度中删除标头高度
• 如果您在右侧有一个导航抽屉，则需要绑定一个类来解决这个问题。

我的v-content CSS看起来像这样，您将需要覆盖掉填充，因为它是由Vuetify通过样式绑定设置的：

main.v-content {
  width: 100vw;
  height: calc(100vh - 64px);
  flex-direction: column;
  overflow: scroll;
  margin-top: 64px;
  padding-top: 0 !important;
}

在模板的v-content标签上，我还有一个绑定到临时右抽屉状态的类，这可以确保滚动条在打开时不会在右导航抽屉下方消失：

<v-content :class="{ draweropen: drawerRight }">

以及该绑定类的CSS，再次需要重要的一点是在抽屉打开时删除默认的右填充Vuetify放置在v-content上：

.draweropen {
  width: calc(100vw - 300px) !important;
  padding-right: 0 !important;
}

如果您的内容像聊天一样是底部加载，则可以选择将flex-direction设置为column-reverse，这是我在此CodePen示例中所做的