在 Quasar/Vue 中隐藏滚动条 - 溢出隐藏不起作用答案

【问题标题】：Hide scrollbars in Quasar/Vue - overflow hidden not working在 Quasar/Vue 中隐藏滚动条 - 溢出隐藏不起作用
【发布时间】：2020-04-29 12:59:33
【问题描述】：

我正在使用 Quasar/VueJS 进行开发。如何删除最外面的滚动条（这是针对页面的实际正文）。

很恼火，我已经尝试将overflow:hidden 放在任何地方，但它仍然存在。由于我的侧边栏有一个滚动条，我只是不想在它旁边放另一个滚动条，因为它可能会让用户感到困惑。如您所见，我正在努力在页面的实际正文旁边添加另一个滚动条。

如何去掉最外层的滚动条？

代码笔：

【问题讨论】：

你试过外页的Css类no-scroll和no-scrollbar吗？请参阅this quasar docs section 中的“滚动相关”。
是的，我做到了.. 我现在用no-scroll 和no-scrollbar 类更新了我的codepen
根据经验，您可以通过选择 dom 元素 .q-layout-container > .absolute-full > .scroll 并将 overflow-y 属性设置为 hidden 来抑制滚动条。这有视觉上的副作用，例如。页眉的宽度。虽然这些影响可能可以得到补偿，但这是一种不能令人满意的方法......

【解决方案1】：

<q-layout container>

从 q-layout 中移除容器。

<q-layout>

【讨论】：

【解决方案2】：

.scroll {
overflow: hidden;}

将这个类添加到你的 CSS 中

【讨论】：

【解决方案3】：

您可以隐藏滚动条而不会失去使用 css 的滚动行为...

/* Hide scrollbar */
::-webkit-scrollbar {
  display: none;
}

这肯定适用于 chrome，可能也适用于 Safari，不确定（可能不是）IE 和 Firefox。

【讨论】：

【解决方案4】：

使用 Quasar，查看文档，更具体的是这个类：no-scrollbar。将此应用于关注的元素。

将以下内容添加到您的主要样式中将使滚动条消失而不会丢失滚动功能：

::-webkit-scrollbar {
   display: none;
}

【讨论】：