@Jasper_Holton's profile photo

How to Create an Infinitely Scrolling Django View Creating a pseudo-infinitely scrolling page for a Django site is fairly easy. It involves creating a main page that renders the first posts, a secondary page that renders more posts according to a page number, and using some basic JavaScript to load in more posts when the user scrolls to the bottom of the page. I created two views to handle the backend code.

# This view renders a scrollable page.
@vary_on_cookie
def scroll(request):
    posts = Post.objects.filter(public=True).order_by('date_posted') # Get the posts for the first page
    p = Paginator(posts, 10) # Paginate them
    if request.user.is_authenticated: # Mark viewership if users are logged in
        for post in p.page(p.num_pages):
            if not post.viewers.filter(id=request.user.id).exists():
                post.viewers.add(request.user)
    context = { # Render the posts
        'posts': p.page(p.num_pages),
        'count': p.count,
        'page_obj': p.get_page(p.num_pages),
        'title': 'Scroll Posts',
        'description': 'Scroll and see all the posts on Uglek here. This is the front page of Uglek.' + basedescription,
        'dontshowsidebar': True,
        'full': True,
        'num_pages': p.num_pages,
    }
    response = render(request, 'blog/scroll.html', context)
    if request.user.is_authenticated:
        patch_cache_control(response, private=True) # Render private page
    return response

# This view is simple. It renders the posts for each page as we scroll through them.
@vary_on_cookie
def scroll_page(request):
    posts = Post.objects.filter(public=True).order_by('date_posted') # Get posts
    p = Paginator(posts, 10) # Paginate them
    page = p.num_pages - 1
    if(request.GET.get('page', '') != ''): # Get the page from the querystring
        page = int(request.GET.get('page', ''))
    if request.user.is_authenticated: # Mark viewership if the user is logged in
        for post in p.page(page):
            if not post.viewers.filter(id=request.user.id).exists():
                post.viewers.add(request.user)
    context = {
        'posts': p.page(page), # Render the posts
        'count': p.count,
        'page_obj': p.get_page(page),
    }
    response = render(request, 'blog/scrollpage.html', context)
    if request.user.is_authenticated:
        patch_cache_control(response, private=True) # Render private page
    return response
The javascript is pretty simple too, we just load in new content every time the window is scrolled close to the bottom.
var page = {{ num_pages }};
$(window).scroll(function() { // On scroll
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 5000) {
        loadNext(); // Load new content
    }
});
loadNext(); // Start by loading
var loading = false; // Keep track of whether we are loading
function loadNext() {
    if (!loading && page > 1) { // If we are not loading already and there is another page
        loading = true; // Mark that we are loading
        page = page - 1; // Decrement the page (to load the next page)
        var scrollContainer = document.getElementById("scroll-container"); // Get the container
        const urlParams = new URLSearchParams(window.location.search);
        var lang = '';
        if (urlParams.get('lang') != null) {
            lang = "&lang=" + urlParams.get('lang'); // Get the language
        }
        // Make a request to the next page with the language
        const Http = new XMLHttpRequest(); 
        const url = "https://uglek.com/scroll/page/?page=" + page + lang;
        Http.responseType = 'text';
        Http.onload = function() {
            if (Http.readyState === Http.DONE) {
                scrollContainer.insertAdjacentHTML("beforeend", Http.responseText);
                loading = false;
            }
        };
        Http.open("GET", url, true);
        Http.send(null); // Send the request
    }
}
The templates are fairly self-explanatory, you just need to render the first posts in the main template, scroll.html, and more posts in scrollpage.html. You'll need to render the pages in an iframe in order for some scripts and products like Google AdSense to work, this is easy to do as you will just need a base template including your styles and scripts which serves a full HTML page (capable of serving ads). You can use this template to render your posts and load them into the main view. The loadNext(); function looks a little different this time, more like this.
 // Load the next part of the site into the main site in an iframe
function loadNext() {
    if (!loading && page > 1) {
        loading = true;
        page = page - 1;
        var scrollContainer = document.getElementById("scroll-container");
        const urlParams = new URLSearchParams(window.location.search);
        var lang = '';
        if (urlParams.get('lang') != null) {
            lang = "&lang=" + urlParams.get('lang');
        }
        const url = "uglek.com/scroll/page/?page=" + page + lang;
        var iframe = document.createElement('iframe');
        iframe.src = url;
        iframe.frameBorder = 0;
        iframe.scrolling = 'no';
        iframe.style.width = '100%';
        iframe.classList.add('mb-3');
        $(iframe).attr('target', '_parent');
        iframe.onload = function() { // Adjust size of iframe on load
            iframe.height = iframe.contentWindow.document.body.scrollHeight + 'px';
            loading = false;
        };
        scrollContainer.appendChild(iframe); // Append it to the document
    }
}
This is all it takes to create an infinitely scrolling Django website. You will be able to automatically load in new posts as you scroll using this code. I am making use of this on the homepage, where you can now scroll to older posts without pressing a button for the next page.


Pinterest logo
Tumblr logo VK logo

https://uglek.com/post/418/ -

© Uglek, 2022

Terms of Use and Privacy Policy