如何檢測Bootstrap模態滾動條的位置？

-1

我正在使用JQuery和Bootstrap，並且正在使用ajax請求加載模態，因此內容將在模態內動態加載。如何檢測Bootstrap模態滾動條的位置？

我設法加載更多的內容與點擊按鈕（也在模式內），但我想實現infinite scroll功能。

但是，window.onscroll函數似乎無法工作，或者無法識別模態內的滾動位置，即使我在第一個ajax請求之後在模態中定義它。

問：我如何檢測內部特定元素的模式是對用戶可見的自動加載更多的內容？

來源

2016-11-09 AlexioVay

爲什麼downvotes這個非常精確的陳述問題？ – AlexioVay

可能是因爲scrollTop在jQuery中是衆所周知的函數:) –

這仍然不是我的具體問題的正確答案。我需要知道如何檢測模態內的滾動行爲，因爲'window.onscroll'不起作用。 – AlexioVay

其實我發現了正確的回答自己：

var modal_scrollTop = $('.modal-body').scrollTop(); 
var modal_scrollHeight = $('.modal-body').prop('scrollHeight'); 
var modal_innerHeight = $('.modal-body').innerHeight(); 

$('.modal-body').scroll(function() { 

    // Write to console log to debug: 
    console.warn('modal_scrollTop: ' + modal_scrollTop); 
    console.warn('modal_innerHeight: ' + modal_innerHeight); 
    console.warn('modal_scrollHeight: ' + modal_scrollHeight); 

    // Bottom reached: 
    if (modal_scrollTop + modal_innerHeight >= (modal_scrollHeight - 100)) { 
     alert('reached bottom'); 
    } 

});

請投我的提問/回答如果它可以幫助你。

來源

2016-11-09 16:49:35 AlexioVay

我有同樣的問題，但您的代碼不適合我 –

我已編輯我的帖子。經過測試並與Google Chrome和現代Android設備配合使用。 '100'表示100像素是閾值（在我的情況下激活無限滾動和加載更多內容選項）。 – AlexioVay

你可以請一個jsfiddle嗎？ –

這應該做的伎倆

const $modal = $("#myModal") 
const $bookList = $modal.find('.media-list') 

$modal.scroll(e => { 
    const $middleBook = $bookList.find('.media').eq(BOOKS_CHUNK_SIZE/2) 
    const middleBookInViewport = $(window).height() > $middleBook.offset().top; 

    if(bookChunks.length && middleBookInViewport){ 
    $bookList.append(bookChunks.shift().map(bookTemplate)) 
    } 
})

jsFiddle

來源

2016-11-09 10:02:40

如何檢測Bootstrap模態滾動條的位置？

回答

相關問題