如何使 vaadin-split-layout 的内容独立滚动？

Question

我有以下 polymer 网络应用程序。整个页面滚动。我想要和的内容独立滚动。 foo 有更长的视图，bar 通常可以在稍微垂直滚动的情况下适应页面。

如何让vaadin-split-layout的两个内容独立垂直滚动？

<app-drawer-layout fullbleed force-narrow>
    <app-drawer slot="drawer">
        <app-toolbar>
            <div main-title>Models</div>
        </app-toolbar>
        <section>
            <div style="margin-bottom:90px;width:100%;"></div>
        </section>
    </app-drawer>
    <app-header-layout>
        <app-header slot="header" fixed effects="waterfall">
            <app-toolbar>
                <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
                <iron-icon id="logo" src="icon.svg"></iron-icon>
                <div main-title>Spliter Sample</div>
            </app-toolbar>
        </app-header>
        <section>
            <vaadin-split-layout orientation="horizontal">
                <foo></foo>
                <bar></bar>
            </vaadin-split-layout>
        </section>
    </app-header-layout>
</app-drawer-layout>

感谢您的任何建议。

Answer 1

您可以像其他任何面板一样设置 vaadin-split-layout 的面板样式 div 因为面板在光线下 DOM 正如您在检查它们的示例时看到的那样。

因此给他们一个明确的高度和一个 overflow:auto 或 overflow-y:auto;启用滚动。样式规则放在你通常的 CSS.

如何使 vaadin-split-layout 的内容独立滚动？

How do I make the contents of a vaadin-split-layout scrolling independently?

vaadin

vertical-scrolling

polymer-3.x