1

How do I run the onclick function when the div becomes visible by the user scrolling to it. Trying to set up infinite scrolling that loads automatically instead of users clicking this button.

The elements scroll horizontally inside another div.

<div id="bottom_end" class="next">
    <a onclick="load_more('/orderby/rising/page/12', '12', 'app_index')"></a>
    <p>Load more<br>in scroll</p>
</div>
Matt Ellwood
  • 105
  • 1
  • 13
  • 1
    **[Look This Question this will help you][1]** [1]: http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible – Maulik Anand Jun 21 '14 at 03:35
  • 2
    @MaulikAnand Note: You'll want to use the `[text](url)` format for [links in comments](http://stackoverflow.com/editing-help#comment-formatting). – Jonathan Lonowski Jun 21 '14 at 03:42
  • @MaulikAnand thanks for that, however, I should have been more clear with "visible". I mean when it is in the viewport when the user scrolls to it – Matt Ellwood Jun 21 '14 at 03:44
  • @MattEllwood For that, [How to tell if a DOM element is visible in the current viewport?](http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) (Read through the top 2 answers.) Also, [jquery trigger function when element is in viewport](http://stackoverflow.com/questions/5911138/jquery-trigger-function-when-element-is-in-viewport). – Jonathan Lonowski Jun 21 '14 at 03:45

1 Answers1

1

You can achieve it using Jquery.

$( '#yourdiv').scroll(function() {
   if ( $(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight()){
       //ajax method for getting your data
       //append response data to your div
    } 
});

Refer this for How to implement ajax using jquery

Community
  • 1
  • 1
Darshan Patel
  • 2,839
  • 2
  • 25
  • 38
  • Does this work for horizontal scrolling? – Matt Ellwood Jun 21 '14 at 09:51
  • No, this works for vertical scrolling but you can put condition for horizontal as well. Logic will be same for infinite auto scroll. For that use scrollWidth and outerWidth. Refer this for [jquery-height-width-inner-and-outer](http://www.midnight-coding.com/2012/09/jquery-height-width-inner-and-outer.html) – Darshan Patel Jun 21 '14 at 12:32