Polymer: how to attach scroll event?

Question

I have created one page on that page I have a paper-item.

<section class="details-panel" on-content-scroll="_scrollHandler">
      <paper-header-panel mode="waterfall" class="paper-font-title" flex >
        <paper-toolbar>
          <div class="paper-header">Info</div>
        </paper-toolbar>
      </paper-header-panel>
      <template class="details-panel" is="dom-repeat" items="{{data}}">
          <paper-item>
            <paper-item-body>
              <div class="horizontal layout center">
                <div class="flex three"><span>{{item.pn}}</span> : </div>
                <div class="flex two">{{item.pv}}</div>                          
              </div>
            </paper-item-body>
          </paper-item>
          <template is="dom-repeat" id="history" items="[[item.av]]" as="subitem">
            <paper-item>
            <paper-item-body>
              <div class="horizontal layout center">
                <div class="flex three"><span>{{subitem.pn}}</span> : </div>
                <div class="flex two">{{subitem.pv}}</div>                         
              </div>
            </paper-item-body>
            </paper-item>
          </template>
      </template>      
    </section>

<section>
  <history-data></history-data>
</section>

I want to load another page history-data after scrolling this list upside below that list. I used on-content-scroll="_scrollHandler" but it is not working.

I tried below code:

<script>
(function(){
Polymer({
    is: 'doc-detail',
  properties: {
    listeners : {
            'tap' : 'tapEvent'
        },        
    tapEvent : function(e) {
      console.log('you tapped!!')
    },
    _scrollHandler : function(e) {
        console.log("yeyyyyy scroll!!!!!");
    }
  });
})();
</script>

Below is the history.html

<dom-module id="history-data">
<link rel="import" href="..\elements.html">
<style>
  :host {
    display: block;   
  }
</style>

<template>

<core-header-panel>
  <div class="core-header">Header</div>
  <div>Content goes here...</div>
</core-header-panel>

</template>
</dom-module>

<script>
(function(){
 Polymer({
    is: 'history-data',
  });
})();
</script>

By this code tap event is working and shows you tapped!! in console, but _scrollHandler not working. What I missed or is it not the right way. Anyone help me. Thanks in advance.

Answer 1

You do not have any content in to scroll in the paper-header-panel. Move the scrollable content below the </paper-toobar> as shown below.

<section class="details-panel" on-content-scroll="_scrollHandler">
  <paper-header-panel mode="waterfall" class="paper-font-title" flex >
    <paper-toolbar>
      <div class="paper-header">Info</div>
    </paper-toolbar>
    <div> scrollable content goes here 
      <template class="details-panel" is="dom-repeat" items="{{data}}">
      <paper-item>
        <paper-item-body>
          <div class="horizontal layout center">
            <div class="flex three"><span>{{item.pn}}</span> : </div>
            <div class="flex two">{{item.pv}}</div>                          
          </div>
        </paper-item-body>
      </paper-item>
      <template is="dom-repeat" id="history" items="[[item.av]]" as="subitem">
        <paper-item>
        <paper-item-body>
          <div class="horizontal layout center">
            <div class="flex three"><span>{{subitem.pn}}</span> : </div>
            <div class="flex two">{{subitem.pv}}</div>                         
          </div>
        </paper-item-body>
        </paper-item>
      </template>
  </template>      
    </div>
       </paper-header-panel>

<section>
  <history-data></history-data>
</section>

That should allow the detail-panel to be scrollable and fire the scroll event.