javascript – 处理内部不同高度的聚合物元素

我有一个< core-drawer-panel>在里面是一个< core-pages>元素内部< core-header-panel main>.

&LT核 – 页面&GT包含我定义的一组自定义元素,并且在任何时间点只显示其中一个元素.但问题是,有些元素只占用屏幕的一部分但仍然垂直滚动.滚动量等于< core-pages>中的最高元素.

预期的行为是元素只有在超过它的视口时才会滚动.我怎样才能实现这种行为？

demo-students.html(剥离版本,使其更具可读性)

<polymer-element name="students-dashboard">
  <template>
    <style>
      …
    </style>

    <core-drawer-panel…>
      <core-header-panel drawer mode="seamed">
          …
      </core-header-panel>

      <core-header-panel main mode="seamed">
        <core-toolbar …>
          <span flex>Students</span>
        </core-toolbar>

        <div class="content">
          <core-pages selected={{getModule(route)}} valueattr="name">
            <!--
              This needs to scroll and it does
            -->
            <students-grid name="students"></students-grid>

            <!--
              The content of this element is short,
              but still scrolls to the same extent as the
              <students-grid> element
            -->
            <student-editor name="student_editor"></students-editor>
          </core-pages>
        </div>
      <core-header-panel>
    </core-drawer-panel>
  </template>

  <script>
    …
  </script>
</polymer-element>

解决方法:

我不知道这是否与我的问题相同：使用< core-pages>它滚动超出较小选项卡的内容.每个页面的大小与最大页面相同.

除了替换< core-pages>之外什么都没有用与< animated-core-pages>这使问题神奇地消失了.

我和< core-scaffold>有类似的问题.来自首发项目,与bowser下载的版本(同一天)不同.使用后者时,错误消失了.

Tldr：也许初学者项目不是最新的.

PS：这解决了页面大小问题,而不是滚动位置跨页面的事实.

标签：html,javascript,polymer
来源： https://codeday.me/bug/20190830/1769757.html