Intento implementar un desplazamiento x infinito con HTMX, pero la solicitud se activa infinitamente, porque el elemento activador se inserta en el lado izquierdo del div y activa una nueva solicitud para cargar elementos dentro del div.

¿Cómo puedo evitar eso: agregar los nuevos elementos, pero mantener la posición de desplazamiento x? Puede ser un problema de CSS o HTMX, no estoy seguro.

 <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>

Probé también con beforebegin y se comporta igual:

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

Aquí hay un codepen para explicar lo que quiero decir: https://codepen.io/viggiesmalls/pen/RwQPROJ