我太懂你这种困扰了——侧边栏已经自带滚动条，主体区域再冒一个确实容易让用户混淆，而且瞎加overflow:hidden往往没效果，毕竟Quasar的布局组件有自己的样式层级。给你几个亲测有效的办法：

1. 穿透修改q-page-container的样式 #

Quasar的页面内容默认是放在q-page-container组件里的，最外层滚动条基本都来自这个容器。由于Vue的Scoped样式会隔离组件样式，你需要用深度选择器来覆盖它的默认样式：

/* Vue 2 用 /deep/，Vue 3 用 ::v-deep */
::v-deep .q-page-container {
  overflow: hidden !important;
}

把这段代码放在当前页面的<style scoped>里，就能精准控制这个页面的外层滚动条，不会影响其他页面。

2. 调整q-layout的配置或样式 #

Quasar的q-layout组件的view属性（默认值比如hHh lpR fFf）会定义布局的响应规则，有时候也会导致滚动条出现。你可以直接给q-layout添加内联样式，或者调整view属性：

<q-layout view="hHh lpR fFf" style="overflow: hidden;">
  <!-- 你的侧边栏、页面内容等布局元素 -->
</q-layout>

不过这个办法优先级不如第一个，因为q-page-container才是直接承载滚动的容器。

3. 检查内容是否溢出容器 #

有时候滚动条出现不是因为布局组件，而是某个子元素的高度超出了容器范围。打开浏览器开发者工具（F12），选中最外层容器，看看是不是有元素的margin、padding或者固定高度导致溢出。如果是这种情况，可以给内容区域设置overflow-y: auto，让内容在内部滚动，而不是触发外层的滚动条：

.your-content-wrapper {
  height: 100%;
  overflow-y: auto;
}

4. 全局样式兜底（慎用） #

如果上面的办法都没效果，可以试试全局样式里设置body和html的overflow，但要注意这个会影响所有页面，除非你只在特定页面引入这个样式：

body, html {
  overflow: hidden !important;
}

这些办法应该能解决你的问题，我之前做Quasar后台项目时也遇到过一模一样的场景，修改q-page-container的样式是最直接有效的。

内容的提问来源于stack exchange，提问作者kzaiwo