How to Load the Web Page Content Based on User Scrolling

How to load the web page content based on user scrolling

Generally speaking, you will need to have some sort of structure like this

....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
<div id="placeHolder"></div>

Then, you will need to detect when you are getting close to the end of the page, and fetch more data

 $(window).scroll(function(){
      if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           AddMoreContent();
      }
 });    

 function AddMoreContent(){
      $.post('getMoreContent.php', function(data) {
           //Assuming the returned data is pure HTML
           $(data).insertBefore($('#placeHolder'));
      });
 }

You may need to keep a javascript variable called something like lastId which stores the last displayed id and pass that to the AJAX receiver so it knows which new content to return. Then in your AJAX you could call

      $.post('getMoreContent.php', 'lastId=' + lastId, function(data) {
           //Assuming the returned data is pure HTML
           $(data).insertBefore($('#placeHolder'));
      });

I did exactly this on my company's search page.

Load new content when user scrolls to the bottom using Dojo?

Unfortunately I can't comment on Niklas' answer, but his answer is correct. The one thing I would change is to issue a Dojo event in the case where you've scrolled to the bottom instead of calling a specific function.

var scrollingDetector = (function() {
    var max = calculateScrollHeight();

    return function(){
        if (max < window.pageYOffset) {   
            max = calculateScrollHeight();
            dojo.publish('/newsApp/onScrollBottom');
        }
    }
    function calculateScrollHeight(){
        return (document.documentElement.scrollHeight - document.documentElement.clientHeight) - 80; 
    }
})();   

setInterval(scrollingDetector, 500);    

(I also took the liberty of refactoring slightly in the interest of performance, as we only need to recalculate the height when we hit the bottom of the page).

This will allow you to hook into this event elsewhere in your code without having to edit this snippet or override the onMoreButtonClick() function.

Load content as an element scrolls into view

Sounds to me like you'd like to detect the scroll bars position when it is near the end. Found this when googling around on the jquery group. Its proposed solution with a little added documentation if needed:

$.fn.isNearTheEnd = function() {
  // remember inside of $.fn.whatever = function() {}
  //   this is the jQuery object the function is called on.
  //   this[0] is DOMElement
    return this[0].scrollTop + this.height() >= this[0].scrollHeight;
};

// an example.
$("#content").bind("scroll", function() {
  if ($(this).isNearTheEnd()) // load some content
});

how to make the content appear on scrolling down the webpage?

If you would like to make some animation also, I'll suggest you AOS

It's an Animate On Scroll Library and you can make the content appear on scrolling down

---

How to use:

adding "data-aos="animation name"" to HTML tags would do the trick:

<div class="topBar" data-aos="fade-in">

after you add in :

<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

in head section and add:

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

before the end of body tag.

a quick example:
https://codepen.io/karenmio/pen/KxGewG

there are variations that you can learn from this but the related site does try to sell you courses, let me know if this link is not proper/or take it out:
https://codepen.io/SitePoint/pen/MmxQMG

loading entire page sections based on scroll position

Create a method in controller that will render a sub-view based on the section number and return you the HTML. Or in your case create a file that will accept a GET request with section number, and render the output of needed section file as its done in most PHP frameworks (see below). That way you can make AJAX request when scrolling position is of necessary value, and insert returned HTML into the page.

<?php
$section_number = $_GET['section'];

ob_start();
if(file_exists(__DIR__ . 'section_' . $section_number . '.php')) {
    include(__DIR__ . 'section_' . $section_number . '.php');
    $var=ob_get_contents(); 
    ob_end_clean();
    echo $var;
}

echo '';

Render PHP file into string variable

Starting a page at a certain scroll point

You can use standard javascript: window.scroll(x, y).

This should work pretty well considering that you'll be doing this at onload, i.e. the window should begin at (0, 0). Play around with (x, y) until you get your header to the position that you're happy with. Naturally you'll need to change it anytime the header moves.

Example:

<body onLoad="window.scroll(0, 150)">

Loading content with ajax while scrolling

I just had to use jQuery Tools' API, the onSeek parameter within the scrollable() method.

It was something like that

$(".scrollable").scrollable({
    vertical: true,
    onSeek: function() {
        row = this.getIndex();
        // Check if it's worth to load more content
        if(row%4 == 0 && row != 0) {
            var id = this.getItems().find('img').filter(':last').attr('id');
            id = parseInt(id);
            $.get('galeria.items.php?id='+id, null, function(html) {
                $('.items').append(html);
            });
        }
    }
}); 

Loading content as the user scrolls down

Unspace had an article demonstrating this functionality: Endless Pageless: No More Next Page. Their demonstration page is here (dead, for reference).

This particular example uses RoR and Prototype.

---

Related Topics