下面固定报头的滚动条与Vuetify +电子

Question

我使用Vuetify和电子制作一个应用程序来帮助我与我的工作，某些任务。我有禁用browserWindow框架，使我的头可拖动区域的一个按钮关闭该窗口。我现在用的是电子vuetify模板

vue init vuetifyjs/electron

我的问题是滚动条到达一路到顶部，但我想是我的固定的标题下。

我试图与在HTML，身上溢出的特性，应用DIV和内容div标签打不过我还没有成功。

我将如何做到这一点？

Answer 1

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

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具体的答案，这应当适用电子是否被卷入。

Vuetify的默认样式做这个有点难度比一个简单的CSS的解决方案可以给你，尤其是当布局变得更加复杂。

在这个例子中我使用的是从Vuetify预定义的主题qazxsw POI的复杂布局

Vuetify附带溢出-Y：因此第一步是增加一个覆盖该滚动html元素上。

here

这将摆脱横跨应用程序的整个高度上右边的吧。

接下来，您将要设置您的V-内容区域的滚动区域。有几个陷阱需要注意，当你设置此区域：

• 显示器挠性已声明
• Vuetify设置在样式属性填充，所以你需要根据你的情况来重写
• 您需要保证金您的标题的高度（如果你改变从64像素的标题高度仅事项）
• 你需要使用钙从内容容器的高度删除页眉高度（同上）
• 如果您对右侧的导航抽屉，你需要绑定一个类来照顾这。

我对V-内容CSS看起来是这样，你将需要重写填充的很重要，因为它是由Vuetify通过样式结合设置：

html {
  overflow: hidden;
}

我也有必然要在模板中钒含量标签的临时右边抽屉的状态一类，这可以确保在滚动条不正确的导航抽屉底下消失时，它是开放的：

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

而CSS为绑定类，再一次你需要一个重要删除默认的右填充Vuetify穿上V-内容当抽屉被打开：

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

您可以选择设置柔性方向列反向如果您的内容加载底部想聊天这是我在这个

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

正在做