當滾動到最後li時檢測到

Question

我需要檢查用戶是否滾動到頁面上的列表項目<li>的末尾。當發生這種情況時，我想執行一個AJAX調用。

如何知道用戶是否滾動到最後一個列表項。

這是我到現在爲止所嘗試過的。

if ($('li:last').is(':visible')) { 
    alert('Scrolled to last li'); 
} 

但是，不幸的是它不工作。

Answer 1

您可以使用這樣的功能：

function isElementVisible(elem) 
{ 
    var $elem = $(elem); 
    var $window = $(window); 

    var docViewTop = $window.scrollTop(); 
    var docViewBottom = docViewTop + $window.height(); 

    var elemTop = $elem.offset().top; 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

並處理滾動事件：

$(document).ready(function(){ 
    $(window).scroll(function(){ 
    var e = $('#yourContiner ul li:last'); 
    if (isElementVisible(e)) { 
     alert('visible'); 
    } 
    }) 
}) 

Answer 2

您不能檢查元素是否爲visible，因爲即使元素不在視口中仍然可見。

從jQuery的文檔：如果他們消耗的文件空間

元素被認爲是可見的。可見元素的寬度或高度大於零。

調整了我的其他answer一點點。

Demo

$(document).ready(function() { 
 
    // Get window height, and the bottom of the viewport 
 
    var windowHeight = $(window).height(), 
 
    gridTop = windowHeight * .1, 
 
    gridBottom = windowHeight + $('ul li:last').height(); 
 

 

 
    // On each scroll event on window 
 
    $(window).on('scroll', function() { 
 

 
    // Interested element caching 
 
    var $lastElement = $('ul li:last'); 
 
    // Get elemets top 
 
    var thisTop = $lastElement.offset().top - $(window).scrollTop(); 
 

 

 
    // Check if the element is in the current viewport 
 
    if (thisTop > gridTop && (thisTop + $lastElement.height()) < gridBottom) { 
 
     $('#message').text('Yay! In sight'); 
 
     $lastElement.addClass('middleviewport'); 
 
    } else { 
 
     $('#message').text('Still not available'); 
 
     $lastElement.removeClass('middleviewport'); 
 
    } 
 
    }); 
 
});

#message { 
 
    position: fixed; 
 
    top: 0; 
 
    text-align: center; 
 
    z-index: 2; 
 
    background: yellow; 
 
    padding: 10px; 
 
    width: 100%; 
 
    color: red; 
 
} 
 
ul { 
 
    margin: auto; 
 
} 
 
ul li { 
 
    width: 300px; 
 
    height: 10px; 
 
    background: #f5f5f5; 
 
    float: left; 
 
    margin: 10px; 
 
} 
 
ul li.middleviewport { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div id="message">Still not available</div> 
 
<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>