我需要检查用户是否已滚动到我页面上的列表项<li>
的末尾。我想在发生这种情况时执行 AJAX 调用。
如何知道用户是否已滚动到最后一个列表项。
这是我迄今为止所尝试过的。
if ($('li:last').is(':visible')) {
alert('Scrolled to last li');
}
但不幸的是,它无法正常工作。
答案 0 :(得分:1)
您无法检查该元素是否为visible
,因为即使该元素不在视口中,它仍然可见。
来自jQuery Docs:
如果元素占用文档中的空间,则认为元素是可见的。可见元素的宽度或高度大于零。
稍微调整了我的另一个answer。
$(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>
答案 1 :(得分: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');
}
})
})