Обнаруживать при прокрутке до последнего 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 Docs:

Элементы считаются видимыми, если они потребляют пространство в документе. Видимые элементы имеют ширину или высоту, которая больше нуля.

Изменил мой другой 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>