Lazy Load and infinitive scrolling issue in jQuery to find new height of an element with position absolute?

Question

I have a div element with position absolute and overflow scroll like this:

<style>
.sevencov {
    position: absolute;
    width: 61.333%;
    left: 16.667%;
    top: 46px;
    bottom: 0;
    right: 0;
    overflow: auto;
}
</style>

<div class="sevencov">
  <a id="load-more" class="load-more" title="Load More" onclick="myFunction()"></a>
</div>

I want to fire the load more button at a certain % of the div on scroll, using jQuery I tried this:

$(function () {
    var prevHeight = $('.sevencov').height();
    $('.sevencov').scroll(function () {
            var curHeight = $(this).height();          
            if ($(this).scrollTop() > ($(document).height() - curHeight)*44) {
               $('#load-more').click();
            }            

    });
});

But the problem is that it fires multiple times because the height of my div sevencov is always the same and I'm not able to find a solution, what am I doing wrong?

I have given you the working copy of your code. Please have a look. — Aruna, Nov 18 '16 at 12:40

score 1 · Answer 1 · edited May 23 '17 at 12:13

1

As mentioned in another question (here), to get the height of a overflow element, you should use $('.sevencov')[0].scrollHeight instead of .height()

edited May 23 '17 at 12:13

Community

1
1

answered Nov 18 '16 at 12:16

Eduardo

508
6
18

ok thanks, I changed this too `if ($(this).scrollTop() > curHeight * 0.7) {` ...the height is calculated correctly but again the jQuery fires multiple time the load-more button – NineCattoRules Nov 18 '16 at 12:30
eg. it fires when `curHeight=24386` and `scrollTop=2410` it doesn't make sense. – NineCattoRules Nov 18 '16 at 12:35
It fires multiple times because it's inside the scroll callback. If you scroll 100px, the scroll function will be called a lot of times. – Eduardo Nov 18 '16 at 12:35
1

Try the @Aruna answer for the load problem – Eduardo Nov 18 '16 at 12:42

Aruna · Accepted Answer · 2016-11-18T13:19:33.013

This is called as Lazy Loading

You can play with scrollTop, innerHeight and scrollHeight as below.

Documentation

scrollTop - Get the current vertical position of the scroll bar for the element

innerHeight - Get the current computed inner height (including padding but not border) for the element

scrollHeight - The height of an element's content, including content not visible on the screen due to overflow

In the below snippet, you can place your ajax call.

Also, the below snippet had window.loadProfile = loadProfile; to make sure your inline onclick works with the parameters onClick="loadProfile(184, '', 'user69')". If possible, you can replace this with jquery click event like, $('#load-more').on('click', function(){ /* ajax call */ });

$(function () { 
  
    var testContent = 'The quick brown fox jumps over the lazy dog. ';
  var increment = 20;
  var contentLoading = false;
  var sevencovDiv = $('.sevencov');
  
  function loadProfile(id, text, user) {
    // You can do a ajax call here instead of a below code
    for(var i = 0; i < increment; i++) {
      sevencovDiv.html(sevencovDiv.html() + testContent);
    }
    
    contentLoading = false; // make this false once the content loaded from ajax call
  }
  
  loadProfile();
  
  window.loadProfile = loadProfile;

    $('.sevencov').scroll(function () {                  
      if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        if(!contentLoading) {
          //loadMore();
          contentLoading = true;
          $('#load-more').click();
        }
    }

    });
});

.sevencov {
    position: absolute;
    width: 61.333%;
    left: 16.667%;
    top: 46px;
    bottom: 0;
    right: 0;
    overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sevencov">
  <a id="load-more" class="load-more" title="Load More" onClick="loadProfile(184, '', 'user69')"></a>
</div>

Thanks Aruna, but my load more button has this attribute `onClick="loadProfile(184, '', 'user69')"` and it changes every time it loads new ajax data — NineCattoRules, Nov 18 '16 at 12:50
it's difficult for me because I create the lazy button in PHP (and I wish to keep things like that) — NineCattoRules, Nov 18 '16 at 12:55
@SimonLeCat I have updated the code and explanation of the code. Please have a look. — Aruna, Nov 18 '16 at 13:03
just last question...how can I anticipate the fire? I tried `... >= $(this)[0].scrollHeight * 0.9` but again it fires multiple time :S — NineCattoRules, Nov 18 '16 at 13:15
@SimonLeCat I have updated the code with a variable `contentLoading` to avoid it firing multiple times and set it as false inside the ajax response once the content received from the server. — Aruna, Nov 18 '16 at 13:21

Lazy Load and infinitive scrolling issue in jQuery to find new height of an element with position absolute?

2 Answers2