Javascript Material design lite，检查滚动是否到达底部

我正在使用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!");
    }
});

什么都没用。 根据这一问题：

Scroll事件将在.mdl-layout\u内容类上触发，但仍无法获取是否达到底部的事件

也许我不想绑定“mdl-layout\u 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，如何防止这种情况

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

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

document.addEventListener（'scroll'，函数（事件）{
var bodyRect=document.getElementsByTagName（'body'）[0].getBoundingClientRect（）；
如果（bodyRect.bottom-window.innerHeight
mdl-layout\u content
有滚动条，或者您希望它出现在窗口滚动条上？我希望它出现在内容中的一个类上。我正在使用angular js在mdl-layout\u content中生成视图。什么意思是您的文档可滚动还是特定div可滚动？特定div，请检查问题，我添加了更多详细信息。我添加了更多详细信息