我如何像 VSCode 一样在 ElectronJS 中添加底部栏？

Question

我正在尝试在 ElectronJS 应用程序的底部添加一个栏，我希望它的位置与 VSCode 中的蓝色底栏相同，滚动条在其上方结束/停止。< /p>

不幸的是，当内容溢出时，滚动条会出现在右侧似乎总是有一个小空间（我不想用 {{1 }} 见编辑 2).

我做了一些测试，通过下面的代码你可以看到我想要的行为似乎发生在 overflow: hidden; 上，即它的滚动条停在 nav-drawer 正上方，这将是我的底部栏 (您看到的粗灰线是滚动条）。

我是半新手，但我无法弄清楚为什么会发生这种情况以及如何修改它以便为整个应用程序获得相同的行为。

VueComponent.vue

v-bottom-navigation

附言我将 ElectronJS 与 VueJS+VuetifyJS 一起使用 - 我按照 here 的描述进行了设置。任何帮助表示赞赏。

编辑 1：我浏览了 VSCode 源代码并找到了 UI 元素 (<template> <div id="nav-drawer"> <v-navigation-drawer v-model="drawer" app color="white darken-3" mini-variant permanent > <v-avatar v-for="n in 30" :key="n" :color="`grey ${n === 1 ? 'darken' : 'lighten'}-1`" size="36" class="d-block text-center mx-auto my-3" > <span>TT</span> </v-avatar> <v-avatar class="d-block mx-auto"> <v-btn icon small color="primary"> <v-icon>fas fa-window-maximize</v-icon> </v-btn> </v-avatar> </v-navigation-drawer> <v-bottom-navigation v-model="value" height="20px" background-color="primary" app> <v-spacer></v-spacer> <v-btn icon small> Button </v-btn> </v-bottom-navigation> </div> </template> <script> export default { name: "NavDrawer", components: { // }, data: () => ({ drawer: true, }) } </script> )。不幸的是，我无法弄清楚底部的栏是哪一个（根据我在这里和那里找到的一些线索，显然称为 vscode/src/vs/base/browser/ui/）。

我认为它可能是 System Bar，但这似乎是 toolbar 的一部分，它是左侧的菜单（默认情况下）并且没有似乎有很多 actionbar 表示它是底部的栏。

编辑 2：我尝试在主 CSS 文件的 html {overflow: hidden;} 部分添加 style。它删除了主页部分的栏（您在第二张图片中看到的带有两个箭头和绿色按钮的滚动条）和滚动的可能性，但是index.html 的滚动条仍然存在并且滚动仍然有效。所以，我想如果我仍然可以在主页部分使用滚动条，并且上面的代码 和 nav-drawer 功能也启用，那么这将是一个选项。不确定这是否可能。

编辑 3： 在 hidden 文件中使用 html {overflow-y: auto;}，当没有内容溢出并且看起来就像我想要的那样时删除滚动条，< strong>但是如果有，它仍然占用空间，看起来像我帖子中的第二张图片。

Answer 1

找到这个例子：CodePen

就我而言，解决方案是使 :root {...} 部分适应我的应用程序，这意味着将底部栏标记为页脚并根据其大小计算内容区域。

html {overflow: hidden;} 必须也位于 index.html 文件的 style 部分。