How can I execute a command on scroll before a user reaches the bottom of the screen?

Question

I would like to execute a command on scroll before a user reaches the bottom of the screen. My code below loads new dynamic content when a user scrolls midway down the screen but I would like the dynamic content to load outside of the viewport. Is there a way to do this? Will I need to adjust the .outerheight or .offset to load the dynamic content earlier? I've attached a graphic that shows what I am trying to accomplish.

 var busy = false;

jQuery( document ).ajaxStart(function() {
    busy = true;
});
jQuery( document ).ajaxStop(function() {
    busy = false;
});

jQuery(window).bind('scroll', function() {

    if(jQuery(window).scrollTop() >= jQuery('#dynamicContent').offset().top + jQuery('#dynamicContent').outerHeight() - window.innerHeight) {

        if (!busy) {
            jQuery('.load-more').click();

        }
    }
});

Here's a snippet of my ajax:

        $.ajax({

            url: '/content',
            type: 'post',
            data: { categoryData: categoryData},
            dataType: 'json',
            success: function(res) {
                response = res.data;

            },
            error: function(err) {
                error = err;

            },
            complete: function() {

                self.hideLoader();


                if (!error) {
                    $('#dynamicContent').html(response.html);
                    self.filterSet(response.enabled);
                    self.setHistory(href, order, filters);

                }



            }
        });

Need more info, how are you adding the dynamic content? Ajax? Is it already part of the page but hidden? — Ryan Wilson, Feb 27 '18 at 19:27
Possible duplicate of [jQuery load more data on scroll](https://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll) — Randy Casburn, Feb 27 '18 at 19:33
@RyanWilson Yes, the Ajax was hidden. I added it to give you an example. — Mariton, Feb 27 '18 at 19:42
@RandyCasburn This isn't a duplicate because my scroller is pretty much doing the exact same thing as `if($(window).scrollTop() == $(document).height() - $(window).height())` in the example. I would just like to load my content outside of the viewport — Mariton, Feb 27 '18 at 19:43
@Mariton This is confusing, if you scroll down far enough, it triggers the loading of your dynamic content, but you want the content to not show up in the browser's window? — Ryan Wilson, Feb 27 '18 at 19:45
@RyanWilson I would like to trigger the loading content outside the viewport. So the dynamic block of code should load right before the user sees the content. This will make the content loading seem seamless. — Mariton, Feb 27 '18 at 19:48
@Mariton I see what you are tyring to do now, but I think you would be better served by loading this content when the page first loads, but place inside a div element with display none, then when the user scrolls far enough down, set your div to display block or some other display option which doesn't hide it's content. — Ryan Wilson, Feb 27 '18 at 19:51
@RyanWilson That would work but it would be a bit clunky for me. I'm just looking for a way to adjust my scrolling time. Cut it in half so that I can load my content early — Mariton, Feb 27 '18 at 19:57

score 0 · Answer 1 · answered Feb 27 '18 at 19:43

0

sample code to detect, when you reach at the bottom of the page

$(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
            alert("you are at bottom of page");
        }
    });

answered Feb 27 '18 at 19:43

Sunny

577
6
20

I would like to do something before the user reaches the bottom of the screen. – Mariton Feb 27 '18 at 19:45

How can I execute a command on scroll before a user reaches the bottom of the screen?

1 Answers1

sample code to detect, when you reach at the bottom of the page