How can I keep the x-scroll position of a div, after inserting elements inside it?

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-trigger="intersect once" 
    <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>

I tried also with beforebegin and it behaves the same:

<div class="bg-amber-400 flex-none w-16 ml-auto"
  hx-trigger="intersect once"

Here is a codepen to explain what I mean:

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum