检测，如果用户滚动到顶部或的UL

Question

我需要检测，如果用户已经滚动到顶部或UL在一个HTML页面

 <ul id="color-list"> 
       <li>Red</li> 
       <li>Blue</li> 
       <li>Purple</li> 
       <li>Blue</li> 
       <li>Yellow</li> 
       <li>Black</li> 
       <li>White</li> 
     </ul> 

底部底部我用这个代码来检测用户是否滚动到的页面的底部：

window.onscroll = function(evt) { 
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { 
     alert("End of Page") ; 
    } 
} 

显然，这将不会对< UL工作>。我应该做什么样的改变？

Answer 1

$().scrollTop()回报多少元素已经从元素的顶部

$().innerHeight()回路内部高度（无滚动）

DOMElement.scrollHeight回报滚动元素内容的高度（带滚动）

$('#color-list').on('scroll', function() { 
 
    var scrollTop = $(this).scrollTop(); 
 
    if (scrollTop + $(this).innerHeight() >= this.scrollHeight) { 
 
    $('#message').text('end reached'); 
 
    } else if (scrollTop <= 0) { 
 
    $('#message').text('Top reached'); 
 
    } else { 
 
    $('#message').text(''); 
 
    } 
 
});

#message { 
 
    font-weight: bold; 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="color-list" style="height: 150px;overflow-y: scroll"> 
 
    <li>Red</li> 
 
    <li>Blue</li> 
 
    <li>Purple</li> 
 
    <li>Blue</li> 
 
    <li>Yellow</li> 
 
    <li>Black</li> 
 
    <li>White</li> 
 
    <li>Red</li> 
 
    <li>Blue</li> 
 
    <li>Purple</li> 
 
    <li>Blue</li> 
 
    <li>Yellow</li> 
 
    <li>Black</li> 
 
    <li>White</li> 
 
    <li>Red</li> 
 
    <li>Blue</li> 
 
    <li>Purple</li> 
 
    <li>Blue</li> 
 
    <li>Yellow</li> 
 
    <li>Black</li> 
 
    <li>White</li> 
 
    <li>Red</li> 
 
    <li>Blue</li> 
 
    <li>Purple</li> 
 
    <li>Blue</li> 
 
    <li>Yellow</li> 
 
    <li>Black</li> 
 
    <li>White</li> 
 
    <li>Red</li> 
 
    <li>Blue</li> 
 
    <li>Purple</li> 
 
    <li>Blue</li> 
 
    <li>Yellow</li> 
 
    <li>Black</li> 
 
    <li>White</li> 
 
    <li>Red</li> 
 
    <li>Blue</li> 
 
    <li>Purple</li> 
 
    <li>Blue</li> 
 
    <li>Yellow</li> 
 
    <li>Black</li> 
 
    <li>White</li> 
 
</ul> 
 
<div id='message'></div>

Answer 2

试试这个，让我知道

$(window).scroll(function() { 
    if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
    alert("End of Page"); 
    } 
}); 

Answer 3

所以，你可以采取scrollTop的（）和innerHeight（）的总和，而当它们等于scrollHeight属性（）发送警报：

$('#color-list').on('scroll', function() { 
    if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) { 
     alert('End of List'); 
    } 
}) 

Answer 4

我跟着你的例子，这是更简单的解决方案，如果你需要检查是否到顶端，我需要一些检查滚动到顶部，所以这里是一个小小的更改代码，也许对某个人会有帮助：

jQuery(document).ready(function() { 
jQuery(window).on('scroll', function() { 
    var vLogo = jQuery(".header-logo-wrap"); 
    var scrollTop = jQuery(this).scrollTop(); 
    vLogo.addClass('logoOnScroll'); 
    if (scrollTop === 0) { 
     vLogo.removeClass('logoOnScroll'); 
    } 
}); 
}); 

所以只是检查它是否是0，并感谢帮助..干杯

Answer 5

$(window).on("scroll", function() { 
    var scrollHeight = $(document).height(); 
    var scrollPosition = $(window).height() + $(window).scrollTop(); 
    if ((scrollHeight - scrollPosition)/scrollHeight === 0) { 
     // when scroll to bottom of the page 
     console.log("bottom") 
    } 
    console.log("scrollHeight:"+scrollHeight) 
});