Quasar - 垂直滚动条不适用于超过 600 像素的宽度

Posted

技术标签:

【中文标题】Quasar - 垂直滚动条不适用于超过 600 像素的宽度【英文标题】:Quasar - Vertical scrollbar not working on more than 600px width 【发布时间】:2017-08-22 22:24:26 【问题描述】:

我正在使用 quasar 框架,但我不知道为什么 .vue 组件中的垂直滚动条会根据窗口的宽度而失败。它适用于小于 600 像素的宽度。

home.vue 代码:

    <template>
    <div class="layout-padding">
        <div class="user">
            <p>User Component</p>
            <router-view class="layout-view"></router-view>
        </div>  
        <div>
            <i>account_circle</i>
            <p class="bg-red-1">Quasar framework</p>
            <button class="secondary" @click="toggleFullscreen()">
            <i class="on-left">zoom_out_map</i>
            Toggle Fullscreen  
            </button>
        </div>

        <div>
            <p>-</p>
            <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <small>Someone famous for <cite title="Quasar Framework">Quasar Framework</cite></small>
            </blockquote>
        </div>
    </div>
</template>

【问题讨论】:

【参考方案1】:

子路由需要根节点,所以我必须添加一个包含“布局填充”div 的 div

<template>
    <div> <!-- root node -->
        <div class="layout-padding">
            [Content...]
        </div>
    </div>
</template>

我从 quasar 文档中得到了解决方案: http://quasar-framework.org/components/layout-overview.html#Understanding-Layouts

【讨论】:

【参考方案2】:

如果之前的页面有一个打开的modal,则当前页面有一些来自modals 的参数(比如没有滚动页面)。所以解决的办法是关闭上一页的modal(@click="modal.close()"),然后进入当前页。

【讨论】:

以上是关于Quasar - 垂直滚动条不适用于超过 600 像素的宽度的主要内容,如果未能解决你的问题,请参考以下文章

垂直滚动不适用于 HammerJS 和 Angular2

Quasar 文件选择器不适用于 android 构建

WPF TextBlock中的自动垂直滚动条?

用于聊天输入的 Quasar 文本区域

malihu 自定义滚动条插件不适用于 Electron.js

如何禁用滚动文档正文?