Question

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

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

或Javascript one：

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”类上绑定偶数，因为这将包含在每个页面上。我只想把它放在一个特定的页面上。

编辑： 这段代码工作正常，但有问题：

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

好吧，我认为您可以通过在当前滚动事件回调中准确检测正文位置来解决您的问题。使用html element的{{3}}方法：

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

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

1 个答案: