描述：
在進行quasar前端開發(fā)過程中，由于側(cè)邊欄沒有設(shè)置overlay屬性，而是固定在左側(cè)。當(dāng)page中頁面內(nèi)容很長時，滾動下滑會讓左側(cè)側(cè)邊欄一起下滑。

左側(cè)邊欄菜單

解決方案：
了解到可以用q-scroll-area組件。

<template>
  <q-page padding>
    <q-scroll-area class="fit" >
    </q-scroll-area>
  </q-page>
</template>

但問題又出現(xiàn)了，讓q-scroll-area充滿q-page的width、height，height: 100%卻無法生效。

看到q-page對應(yīng)的main標(biāo)簽中，賦予了min-height: calc(100vh - 50px);樣式，因此想到讓q-scroll-area也賦予該樣式。

最后：實現(xiàn)了側(cè)邊欄單獨滑動，內(nèi)容頁單獨滑動

<template>
  <q-page padding>
    <q-scroll-area style="height: calc(100vh - 50px)" >
    </q-scroll-area>
  </q-page>
</template>
// 其中50px是header的高度

單獨滑動效果

如果要將其封裝成組件

<template>
  <q-scroll-area class="proj-con" :class="scroll_class" >
    <div class="layout-padding" :class="content_class">
      <slot></slot>
    </div>
  </q-scroll-area>
</template>
<style lang="stylus">
.proj-con
  height calc(100vh - 50px)
</style>

<script>
export default {
  data () {
    return {
    }
  },
  props: {
    content_class: String,
    scroll_class: String
  }
}
</script>

// 其他頁面使用，引入組件，使用
<q-page>
    <proj-base-scroll content_class="p-max-w">
      <p>111</p>
    </proj-base-scroll>
  </q-page>
</template>