材料设计轻量级，检查滚动是否到达底部

Question

我正在使用Angular.js和Material Design lite。在滚动到底部时，无法触发事件。 我尝试了几乎所有的解决方案，但都没有起作用。 例如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!");
    }
});

没有任何东西起作用。 根据这个问题：Material design and jQuery, scroll not working， 滚动事件将在.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，如何防止这种情况发生？

- Rahul Sagore

---

mdl-layout__content是否具有滚动条，或者您希望在窗口滚动时出现滚动条？ - Jai

我想把它放在内容内的一个类中。我正在使用AngularJS在mdl-layout__content中生成视图。 - Rahul Sagore

你的意思是文档是否可滚动，还是特定的div可滚动？ - Jai

特定的div，检查问题，我已经添加了更多细节。 - Rahul Sagore

Answer 1

嗯，我认为你可以通过在当前滚动事件回调中精确检测身体位置来解决问题。使用getBoundingClientRect方法的html元素：

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!");
  }
});

- MysterX

---

我已经添加了更多细节。 - Rahul Sagore