javascript - 检测用户是否滚动到 UL 的顶部或底部

Question

我需要检测用户是否已滚动到 HTML 页面中 UL 的顶部或底部

       <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") ;
     }
 }

显然这对

不起作用。伙计们，我应该做出哪些改变？

Answer 1

$().scrollTop() return how much element has been scrolled from top

$().innerHeight() return inner height of the element(without scroll)

DOMElement.scrollHeight returns height of the content of the element(with scroll)

$('#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>