材料设计精简版,检查滚动是否到达底部

Question

我正在使用Material Design lite和Angular.js.在事件到达底部时遇到问题以调用事件.我几乎尝试了所有解决方案但没有工作.像jQuery解决方案:

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() ==      
        $(document).height())        
    {
        alert("bottom!");
    }
});

或Javascript一:

document.addEventListener('scroll', function (event) {
    if (document.body.scrollHeight == 
        document.body.scrollTop + window.innerHeight) {
        alert("Bottom!");
    }
});

没有工作.根据这个问题:材质设计和jQuery,滚动不起作用

滚动事件将在.mdl-layout__content类上触发,但仍无法获取底部到达的事件.

也许我不想在"mdl-layout__content"类上绑定偶数,因为这将包含在每个页面上.我只想把它放在一个特定的页面上.

编辑: 此代码工作正常,但有问题:

function getDocHeight() {
     var D = document;
     return Math.max(
            document.getElementById("porduct-page-wrapper").scrollHeight,
            document.getElementById("porduct-page-wrapper").offsetHeight,
            document.getElementById("porduct-page-wrapper").clientHeight
        );
}
window.addEventListener('scroll', function(){
    if($('.mdl-layout__content').scrollTop() + $('.mdl-layout__content').height() == getDocHeight()) {
           alert("bottom!");
    }
}, true);

问题是,每次我更改页面并返回时,事件应该调用的次数是相乘的.每当我更改页面或点击链接时,它可能会一次又一次地发生绑定事件.我正在使用Angular.js,我该如何防止这种情况？

Answer 1

好吧，我认为您可以通过准确检测当前滚动事件回调中的身体位置来解决您的问题。使用以下方法的getBoundingClientRecthtml element方法：

document.addEventListener('scroll', function (event) {
  var bodyRect = document.getElementsByTagName('body')[0].getBoundingClientRect(); 
  if (bodyRect.bottom - window.innerHeight <= 20){
    // less then 20px rest to get the bottom
    alert("Bottom!");
  }
});