材料設計精簡版，檢查滾動是否達到底部

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

不，不工作。 –

我已添加更多詳細信息 –

材料設計精簡版，檢查滾動是否達到底部

回答

相關問題