我正在使用 Vuetify 和 Electron 制作一个应用程序来帮助我完成工作中的某些任务。我禁用了 browserWindow 框架，并使用按钮关闭窗口使我的标题成为可拖动区域。我正在使用电子 vuetify 模板
vue init vuetifyjs/electron
我的问题是滚动条一直到顶部，但我希望它在我的固定标题下方。
我曾尝试在 html、body、app div 和 content div 标签上使用溢出属性，但没有成功。
我将如何做到这一点？
【问题讨论】：
标签： vuejs2 electron vuetify.js
这纯粹是一个 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 中查看此内容
【讨论】：
我想为这个问题提供一个 Vuetify 的具体答案，无论是否涉及 Electron，这都应该适用。
Vuetify 的默认样式比简单的 CSS 解决方案更难，尤其是当布局变得更复杂时。
对于这个例子，我使用了 Vuetify 预定义主题 here 中的复杂布局
Vuetify 在 html 元素上带有一个 overflow-y: scroll 所以第一步是为此添加一个覆盖。
html {
overflow: hidden;
}
这将去掉横跨应用整个高度的右侧栏。
接下来，您需要将 v-content 区域设置为可滚动区域。设置此区域时需要注意一些问题：
我的 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 Example 中所做的事情
【讨论】：
我构建了一个小组件，它包装了 v-main 并将滚动条移动到主容器而不是默认容器（整个 html）。
只需用这个替换 v-main 就可以了。
<template>
<v-main class="my-main">
<div class="my-main__scroll-container">
<slot />
</div>
</v-main>
</template>
<script>
export default {
mounted: function() {
let elHtml = document.getElementsByTagName('html')[0]
elHtml.style.overflowY = 'hidden'
},
destroyed: function() {
let elHtml = document.getElementsByTagName('html')[0]
elHtml.style.overflowY = null
},
}
</script>
<style>
.my-main
height: 100vh
.my-main__scroll-container
height: 100%
overflow: auto
</style>
【讨论】：