JSFiddle - React, Tailwind, and code Playground

by CarambaMoreno

HTML

<div class="grid-x seccion--principal">
  <div class="cell small-12 principal--bloques" id="principal_bloques">
    <div class="grid-x seccion--bloque">
      <div class="cell bloque small-12">1<img src="https://placekitten.com/600/300"></div>
    </div>
    <div class="grid-x seccion--bloque">
      <div class="cell bloque small-12">2<img src="https://placekitten.com/600/402"></div>
    </div>
    <div class="grid-x seccion--bloque">
      <div class="cell bloque small-12">3<img src="https://placekitten.com/600/503"></div>
    </div>
    <div class="grid-x seccion--bloque">
      <div class="cell bloque small-12">4<img src="https://placekitten.com/600/604"></div>
    </div>
    <div class="grid-x seccion--bloque">
      <div class="cell bloque small-12">5<img src="https://placekitten.com/600/305"></div>
    </div>
    <div class="grid-x seccion--bloque chander">
      <div class="cell bloque small-12">6<img src="https://placekitten.com/600/300"></div>
    </div>
    <div class="grid-x seccion--bloque">
      <div class="cell bloque small-12">7<img src="https://placekitten.com/600/402"></div>
    </div>
    <div class="grid-x seccion--bloque">
      <div class="cell bloque small-12">8<img src="https://placekitten.com/600/503"></div>
    </div>
  </div>
</div>

CSS

.seccion--bloque .bloque{ height: 33.33vh; width: 30vw !important; padding: 2rem; border: 1px solid black; }
    .bloque img{ width: 100%; height: 100%; }
    .seccion--principal{ overflow-y: scroll; animation-iteration-count: infinite;  }

JavaScript

//jQuery( document ).ready(function($) {

SmoothScrollTo("#principal_bloques", 5000);

function SmoothScrollTo(id_or_Name, timelength){
    var timelength = timelength || 1000;
    var alto = $(window).scrollTop() + ($('.seccion--bloque').height()*5);

    $('html, body').animate({
        scrollTop: $(id_or_Name).offset().top+alto
    }, timelength, 'swing', function(){} );
    $(id_or_Name).css("scrollTop", "infinite");
}
//$('#principal_bloques').style.animationIterationCount = "infinite";

 var quintobloque = $(".seccion--bloque")[5];
 var posicionbloque = quintobloque.scrollTop();
//console.log("DIVS seccion--bloque");
//console.log(posicionbloque);
$(window).scroll(function () {

  var pantalla = $(window).scrollTop();
  var divbloque = $('.seccion--bloque').height()*5;
  console.log(divbloque);
  console.log(pantalla);
    if (pantalla == divbloque) {
      var cantdivs = $("#principal_bloques .seccion--bloque").length;
      console.log("cantdivs");
      console.log(cantdivs);
        
    };
 
});



//});