JSFiddle - React, Tailwind, and code Playground

HTML

<div class='conteneur'>
  <div class='premier'>
  <p>c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element<br/> c'est le premier element</p>    
  </div>
  <div class='deuxieme'>
  <p>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/>c'est le deuxieme element<br/></p>  
  </div>
  <div class='troisieme'>
    <p>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/>c'est le troisieme element<br/></p>    
  </div>
  <div class='cible'>CIBLE</div>
  <div class='quatrieme'>
  <p>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/>c'est le quatrieme element<br/></p>   
  </div>
  <a class='gauche'><p>Gauche</p> </a>
  <a class='droite'><p>Droite</p> </a>
  
  </div>

CSS

.conteneur{text-align:center;width:90%;
      position:fixed;overflow-y: auto;max-height:90%;}
.conteneur > div{vertical-align:medium;}
.premier{background-color:Red;}
.deuxieme{background-color:blue;}
.troisieme{background-color:yellow;}
.quatrieme{background-color:green;}
.gauche,.droite{position:absolute;top:50%;text-align:center;vertical-align:medium;
                width:50px;height:50px;
                color:white;background-color:black}
.gauche{left:0;border-radius:0 25px 25px 0}
.droite{right:0;border-radius:25px 0 0 25px}
.gauche:hover,.droite:hover{cursor:pointer;background-color:blue;}

JavaScript

$(document).ready(function(){ 
	
 
  $(".conteneur").scroll(function(){
 		var fenetre=$(this),
    scrollBottom=parseInt(fenetre.height()+fenetre.scrollTop()),
 		scrollTop=fenetre.scrollTop(),
 		cible=$(".cible"),
 		Button=$(".gauche,.droite").offset(),
    
    //set le Top selon le scroll   
 		Top=fenetre.height()/2+cible.height()<cible.offset().top
 			? fenetre.scrollTop()+fenetre.height()/2
      : cible.offset().top+fenetre.scrollTop()-cible.height();
 	
  $(".gauche,.droite").css({'top':Top});  
  // si le debut de la page
  if(scrollTop==0){
  console.log("debut de page");
  }
        
  });
  
});