Question

我想使用iron-scroll-threshold元素，当我滚动时加载更多数据，但我在webcomponents中找到的一个例子似乎不起作用。它在console上没有返回任何内容。这是我的代码：

<iron-scroll-threshold lower-threshold="400" on-lower-threshold="loadMoreData" id="threshold">
  <iron-list scroll-target="threshold" items="[[ajaxResponse]]" as="item">
    <template>
      <div>[[item.name]]</div>
    </template>
  </iron-list>
</iron-scroll-threshold>

my function: loadMoreData() { 
    console.log("Inside ..."); 

    asyncStuff(function done() { 
        ironScrollTheshold.clearTriggers(); 
    }
);

Answer 1

Iron-threshold似乎有很多问题，如下所述： https://github.com/PolymerElements/iron-scroll-threshold/issues/23

我建议不要使用它，只需实现你自己的滚动事件监听器：

    const lowerThreshold = 500
    window.addEventListener('scroll', function(e) {
      var body = document.body // For Chrome, Safari and Opera
      var html = document.documentElement // Firefox and IE
      var documentHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight )
      var windowHeight = window.innerHeight
      var bodyScrollBottom = documentHeight - windowHeight - body.scrollTop
      var htmlScrollBottom = documentHeight - windowHeight - html.scrollTop

      //to take in account for difference browsers
      if( bodyScrollBottom < lowerThreshold ){
        //below the threshold. Do something
        //for Chrome, Safari and Opera
      }else if( htmlScrollBottom < lowerThreshold){
        //below thre threshold. Do something
        //for Firefox and IE
      }
    })

聚合物：如何在聚合物2中使用铁滚动阈值

1 个答案: