Question

   #scrollpanel{
      border: 1px solid blue;
      height:100%;
    }
    .contentcontainer {
      margin:60px 0;
      border: 1px solid red;
    }


<core-scroll-threshold id="threshold" scrollTarget="{{$.scrollpanel}}" lowerThreshold="10" on-lower-trigger="{{loadMore}}" fit></core-scroll-threshold>
    <core-scroll-header-panel id="scrollpanel" condenses="true" keepCondensedHeader scrollAwayTopbar="false">
      <!-- toolbar -->
      <core-toolbar class="tall">
        <paper-icon-button icon="arrow-back"></paper-icon-button>
        <div flex></div>
        <paper-icon-button icon="search"></paper-icon-button>
        <paper-icon-button icon="more-vert"></paper-icon-button>
        <div id="title" class="bottom indent title">{{category}}</div>
      </core-toolbar>
      <!-- end -->
      <!-- my literation items -->
     <div layout vertical class="contentcontainer">
       <template repeat="{{articlecatalog in articlecatalogs}}">
          <div layout horizontal  class="rowcontent">
            <div flex></div>
            <div flex two>
              <core-selector>
                <div style="border: 1px solid #bebebe; padding: 16px; margin: 16px; border-radius: 5px; background-color: #fff; color: #555;">
                  <div style="display: inline-block; height: 64px; width: 64px; border-radius: 50%; background: #ddd; line-height: 64px; font-size: 30px; color: #666; text-align: center;">Q</div>
                  <div style="font-size: 22px; padding: 8px 0 16px; color: #888;"></div>
                  <div style="font-size: 16px; padding-bottom: 8px;">{{articlecatalog.title}}</div>
                  <div style="font-size: 12px;">{{articlecatalog.description}}</div>
                </div>
              </core-selector>
            </div>
            <div flex></div>
          </div>
        </template>
        <div hidden?="{{!$.threshold.lowerTriggered}}">Please wait...</div>
      </div>
      <!-- end -->
    </core-scroll-header-panel>

以上是我实现滚动阈值的主要代码，我遇到的问题是无论设置lowerThreshold，当我滚动页面时，即使只是一点点，也会触发lower-trigger事件。如何正确使用core-scroll-threshlod？

Answer 1

你需要使用元素的scroll属性而不是元素不是self。

scrollTarget="{{$.scrollpanel.scroller}}"

示例 http://plnkr.co/edit/01QR1KKbs89t31pSnwxW?p=preview

如何正确使用core-scroll-header-panel中的core-scroll-threshold？

1 个答案: