<div class="flex flex-row overflow-x-visible" x-data="">
  <template x-for="i in 100">
  <div class="border border-black m-1 p-10 min-w-max h-10"
       x-data=""
       x-init="() => {
           let timeout;
           let loadColumn = function (elements) {
               clearTimeout(timeout);
               
               timeout = setTimeout(function() {
                   elements.forEach(element => {
                       if (element.isIntersecting) {
                           element.target.classList.add('bg-black');
                           observer.unobserve(entries[0].target);
                       }
                   });
               }, 750);
           }
           
           let observer = new IntersectionObserver(loadColumn);
           let target = $el;
           observer.observe(target);
       }">
  </div>
  </template>
</div>