Question

我有ember app。其中我在导航栏中有图标，点击时会显示带通知的下拉列表。我已将下拉列表的最大高度设置为390px。现在我想确定用户何时到达底部下拉，以便我可以对服务器进行ajax调用以获取更多数据。

HTML

<div class="ps-content">
.....notification content.....
</div>

CSS

.ps-container{
  max-height: 390px;
  position: relative;
}

JS

didInsertElement: function(){
    $('.ps-content').on('scroll', $.proxy(this.didScroll, this));
  },
  willDestroyElement: function(){
    $('.ps-content').off('scroll', $.proxy(this.didScroll, this));
  },

  didScroll: function(){
    if (this.isScrolledToBottom()) {
      this.sendAction('loadMore');
    }
  },

  // we check if we are at the bottom of the page
  isScrolledToBottom: function(){
      var distanceToViewportTop = WHAT SHOULD I AM DO HERE ?
      var viewPortTop = $('.ps-content').scrollTop();
      if (viewPortTop === 0) {
        return false;
      }   
      return (viewPortTop - distanceToViewportTop === 0);
  },

当我执行$（'。ps-content'）。height它给出390px。如何将整个内容高度渲染到下拉列表中？

在“viewPortTop”中我得到了多少用户滚动。但我无法弄清楚我应该做什么“distanceToViewportTop”这样当用户到达底部时差异为零。我不能使用documnet高度和窗口高度，因为它需要整个页面高度。对于整个页面它是documnet - 窗口高度，以获得底部页面。我应该为div做什么？

Answer 1

您可以使用一些属性/方法：

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//

元素内容的高度

所以你可以得到前两个属性的总和，当它等于最后一个属性时，你已经到了最后：

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)    [0].scrollHeight) {
            alert('end reached');
        }
    })
});

http://jsfiddle.net/doktormolle/w7X9N/

确定是否在div中滚动到底部

1 个答案: