I try to implement an infinite x-scroll with HTMX, but the request is infinitely triggered, because the triggering element gets inserted on the left side of the div and triggers a new request to load items inside the div.

How can I avoid that: append the new elements, but keep the x scroll position? It might be a CSS or a HTMX issue, I am not sure.

<div class="flex h-full space-x-2">
  <div class="bg-amber-600 flex-initial w-1/4"></div>
  <div class="flex space-x-2 w-full overflow-x-auto">
    <div class="flex-none w-16 ml-auto" 
      hx-get="/scroll" 
      hx-trigger="intersect once" 
      hx-swap="outerHTML">
    </div>
    <div class="bg-amber-400 flex-none w-16">0</div>
    <div class="bg-amber-400 flex-none w-16">1</div>
    <div class="bg-amber-400 flex-none w-16">2</div>
    <div class="bg-amber-400 flex-none w-16">3</div>
  </div>
</div>

I tried also with beforebegin and it behaves the same:

<div class="bg-amber-400 flex-none w-16 ml-auto"
  hx-get="/scroll"
  hx-trigger="intersect once"
  hx-swap="beforebegin">x</div>

Here is a codepen to explain what I mean: https://codepen.io/viggiesmalls/pen/RwQPROJ