---
canonical: "https://www.jsolly.com/blog/implement-infinite-scroll-in-django-with-htmx/"
title: "Eliminating Duplicate Pages With HTMX Infinite Scrolling"
description: "Discover how htmx can be used to improve your website by implementing infinite scrolling, resolving duplication issues and enhancing functionality."
author: "John Solly"
published: "2022-10-26T23:41:20.564Z"
updated: "2026-09-07T14:25:05.503Z"
---

<a id="eliminating-duplicate-pages-with-htmx-infinite-scrolling"></a>

# Eliminating Duplicate Pages With HTMX Infinite Scrolling

![HTMX Logo](https://d1d7p8ufhgz4ld.cloudfront.net/media/post_metaimgs/htmx.webp)

<a id="note"></a>

## Note

Hey!   
Since this blogpost was written, I created a new and improved way to do infinite scrolling. Check out this YouTube Video to see the latest implementation. 

<iframe src="https://www.youtube-nocookie.com/embed/Oj1aEz8XsiI" style="position:absolute;width:100%;height:100%;top:0;left:0" allow="autoplay; encrypted-media" allowfullscreen="" title="Video: Eliminating Duplicate Pages With HTMX Infinite Scrolling" loading="lazy"></iframe>

<a id="legacy-implementation"></a>

## Legacy Implementation

Htmx superpowers your html, allowing it to do things you would typically have to do in JavaScript. After discovering [issues with duplicate pages](https://www.jsolly.com/blog/get-a-perfect-score-on-seo-tool-ahrefs/) due to my pagination implementation, I removed all the duplication with infinite scroll!

Luckily, I came across an [excellent youtube video](https://www.youtube.com/watch?v=RacU_1NgVIg) by bugBytes who walks you through how to pull off infinite scroll with htmx.

I won't bore you with all the details, but I will highlight how I adjusted the implementation to handle category pages.

In bugByte's example, he hardcodes the URL to fetch articles since he is only working with one view:

<pre><code class="language-html language-python">&lt;div hx-get="{% film-list %}?page={{ page_obj.number|add:1 }}" hx-trigger="revealed" hx-swap="afterend" hx-target="this"&gt;
</code></pre>

In my case, posts can come from multiple views. I modified the request to reference a `url` variable I passed within the view to support more than one view. Notice I replace `film-list` with `url`.

<pre><code class="language-html language-python">&lt;div hx-get="{{ url }}?page={{ page_obj.number|add:1 }}" hx-trigger="revealed" hx-swap="afterend" hx-target="this"&gt;
</code></pre>

Within each view, I pass the current path into the template as a context variable:

<pre><code class="language-python">class CategoryView(ListView):
	...
    def get_context_data(self, *args, **kwargs):
        ...
        context["url"] = self.request.path
        return context</code></pre>

This way, the template is always fetching the correct url!

<a id="conclusion"></a>

## Conclusion

After running into [issues with duplicate content](https://www.jsolly.com/blog/get-a-perfect-score-on-seo-tool-ahrefs/) with my previous pagination implementation, I decided to use htmx to implement infinite scrolling. This resolved the duplication issue and introduced new functionality. I call that a win!

[See the PR where I implemented infinite scroll.](https://github.com/jsolly/awesome-django-blog/pull/142/files)

October 26, 2022 in [Web Dev](https://www.jsolly.com/blog/category/web-dev/)

Updated September 7, 2026