CODEWITHSUNDEEP
polymerpolymer-1.0
dman
dman

Reputation: 11073

iron-scroll-threshold only fires once

Polymer 1.*

I am not having much success with Polymer's iron-scroll-threshold. I can get it to fire once when my app first loads. After that, it will never fire.

My top header is about 400px. My goal is to get iron-scroll-threshold fire when the user scroll's about 200 from the top.

Any suggestions?

  <iron-scroll-threshold  id="bar" upper-threshold="150" on-upper-threshold="scrollSnap">
    <div class="vertical layout">
      <div>
        <div>
          <h2 class="section-title">Portfolio</h2>
          <p class$="[[activeTextSection(active)]] section-description">foo
        </div>
        <br>
        <br>
        <div class="layout horizontal center-center" hidden$="{{queryMatches}}">
          <iron-icon class="small-icon" icon="build"></iron-icon>
          <iron-icon class="small-icon" icon="cloud-circle"></iron-icon>
          <iron-icon class="small-icon" icon="http"></iron-icon>
        </div>
        <div
          class="layout horizontal center-center active-desktop-container"
          hidden$="{{!queryMatches}}">
          <iron-icon class$="[[activeIconSectIcon(active)]]" icon="build"></iron-icon>
          <iron-icon class$="[[activeIconSectIcon(active)]]" icon="cloud-circle"></iron-icon>
          <iron-icon class$="[[activeIconSectIcon(active)]]" icon="http"></iron-icon>
        </div>
      </div>
    </div>
  </iron-scroll-threshold>

 <script>
    Polymer({
      is: "portfolio-page",
      behaviors: [pageBehavior],
      scrollSnap: function(e) {
        console.log(e);
        this.$.bar.clearTriggers();
      }
    });
  </script>

Upvotes: 1

Views: 114

Answers (1)

Cappittall
Cappittall

Reputation: 3441

Here the full code an example to test for localhost ; 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">  
  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
  <link rel="import" href="bower_components/iron-scroll-threshold/iron-scroll-threshold.html">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>
  <test-component></test-component>
  <dom-module id="test-component">
  <template>
    <style>
      :host {
        display: block;
        height: 100%;
      }
      iron-scroll-threshold {
        height: 100%;
        overflow: auto;
      }

    </style>
    <iron-ajax auto url= "{{url}}"  last-response="{{response}}"></iron-ajax>

   <!--<iron-scroll-threshold id="mytras" on-lower-threshold="loadMoreData" lower-threshold="100" scroll-target="document">-->
   <iron-scroll-threshold  id="mytras" upper-threshold="150" 
 on-upper-threshold="scrollSnap" scroll-target="document" on-lower-threshold="loadMoreData">
     <template is="dom-repeat" items="{{response.results}}">
        <span>&nbsp;[[index]] :  [[item.name.first]] [[item.name.last]]</span<br/>
     </template>
  </iron-scroll-threshold>
</template>
<script> 
class MyTest extends Polymer.Element {
          static get is() { return 'test-component'; }
          static get properties() { return { 
            people:{
              type:Number,
              value:20
            }

         }};
   static get observers() { return ['_url(people)']}

    _url(p){
        console.log(p);
        this.url = "https://randomuser.me/api?results=" + p;
        setTimeout(()=> {
            this.$.mytras.clearTriggers();
        },900)
    }

     loadMoreData (){
          console.log("God call me for every scroll");
          this.people += 10;                
     } 
   }
   scrollSnap() {
      console.log('upper threshold');
      setTimeout(()=> {
            this.$.mytras.clearTriggers();
        },900)
   }
   customElements.define(MyTest.is, MyTest);
   </script>
  </dom-module>
  </body>
  </html>

Upvotes: 1

Related Questions