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

我使用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

滚动事件将触发.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，我该如何防止这种情况？

来源

2015-10-13 Rahul Sagore

'MDL-layout__content'具有滚动或者您想要的窗口滚动？ – Jai

我想要在内容中的类之一。我正在使用角度js在mdl-layout__content中生成视图。 –

这是什么意思是你的文档可滚动或特定的div可滚动？ – Jai

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

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

来源

2015-10-13 09:37:39 MysterX

不，不工作。 –

我已添加更多详细信息 –

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

回答

相关问题