Detect if the user scrolled to the top or the bottom of a UL

Question

I need to detect if the user has scrolled to the top or the bottom of the UL in a HTML Page

       <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>

I use this code to detect if the user scrolled to the bottom of the page :

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

Obviously this won't work for the < ul >. What changes should I make guys?

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> 

Answer 2

So you can take the sum of scrollTop() and innerHeight(), and when they are equal to the scrollHeight() the alert is sent:

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

Answer 3

Try this and let me know

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

Answer 4

I followed your example and this is just simpler solution if you need to check is it to the top, I needed some check to scroll to top, so here is a little changed code, maybe for someone it will be helpful:

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

So just check if it is 0, and thanks for help.. Cheers

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