How to get to know that user is at the end of the current document

Question

Pardon me: Hello. I hope I am not confusing you guys in the title of my question.

Background: What I want is actually to update the content of the site. I was told about some plugins like infinite-scroll throughout Google as well as Stackoverflow, but I don't want to use any plugins for that. What I found then was a pure jQuery code to detect the user's current position on the document. That goes something like this:

$(window).scroll(function() {
 if($(window).scrollTop() + $(window).height() == $(document).height()) {
  alert("bottom!");
 }
});

What I found:

I found this code here: Check if a user has scrolled to the bottom

So that means that I have already read all the questions on stackoverflow.

What is the issue: The issue is that the code above doesn't work fair. It works good only if I am using: == $(document).height() because it will just run the code when the user is at the end of the document. Once I try to use something like: $(document).height() - 100 or anything else like that. It doesn't work. I have to go to end of the document, and when I come back it shows the alert! That would be pretty unlikely to the user.

I have also tried the unbind('scroll') but that stops the code execution once its gone through an alert! I mean it just alerts the user once, so indirectly it will load the data for the user once, and will stop loading more data again.

So I thought asking the question here would be a better idea. Can I get a simple jQuery code, which would come to know about the user's presence on the screen! And lot the data once, because when I use > $(document).height() it keeps showing me the popup, but it should stop showing popup and start showing pop ups again once the request has been made!

Or in simple words:

Or in other words, what I want is that the request should be made when the user has gone 80% down the way to the bottom so when he reaches almost 95%th part of the page the data is placed there and he can view it, and then again when he reaches 80%th part down request is made. And so on! This part would be easy to understand.

Using this works:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
      alert("Sending ajax request!");
      $.ajax({
         url: "ajax_requests/send_email_digest",
         success: function (data) {
           // show the data..if any
         }
      });
   }
});

But this doesn't:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == 
    $(document).height() - 100) {
      alert("Sending ajax request!");
      $.ajax({
       url: "ajax_requests/send_email_digest",
       success: function (data) {
        // show the data..if any
       }
     });
  }
});

papkass · Accepted Answer · 2013-09-23T12:32:03.167

1

I don't think the scroll function is called for every pixel you scroll. You'll have to be lucky to get a match in this if statement

if($(window).scrollTop() + $(window).height() == $(document).height() - 100)

I think you'll have to settle with detecting if the user is in the bottom 20% of the page and you could use a global variable to check if an ajax request in running.

var requesting = false;
$(window).scroll(function() {
   if(!requesting && 
      (($(window).scrollTop() + $(window).height()) >= ($(document).height() * 0.8))) {
      requesting = true;
      alert("Sending ajax request!");
      $.ajax({
       url: "ajax_requests/send_email_digest",
       success: function (data) {
        // show the data..if any
       }
     }).done(function(){
        requesting = false;
    });
  }
});

edited Sep 23 '13 at 12:32

answered Sep 23 '13 at 11:41

papkass

1,261
2
14
20

I will check the ajax request inside the inspector. And however, your idea is great! But can you tell me how to check the values in percentage? Because you're perfectly correct about the idea of pixels. – Afzaal Ahmad Zeeshan Sep 23 '13 at 11:44
I updated the answer. If scrollTop + window.height is larger that document.height * 0.8 (80%), then fire the request. – papkass Sep 23 '13 at 12:34

How to get to know that user is at the end of the current document

1 Answers1