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

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

没有任何效果。 根据这个问题:Material design and jQuery, scroll not working

Scroll 事件将在 .mdl-layout__content 类上触发，但仍然无法获取是否到达底部的事件。

而且我可能不想在“mdl-layout__content”类上绑定(bind)偶数，因为这将包含在每个页面上。 我只想要一个特定页面。

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

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);

问题是，每次我更改页面并返回时，事件应调用的次数都会成倍增加。每当我更改页面或单击链接时，它可能一次又一次地绑定(bind)事件。 我正在使用 Angular.js，如何防止这种情况发生？

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