JSFiddle - React, Tailwind, and code Playground

HTML

<button id="avant">avant</button>
<button id="arriere">arriere</button>
<button id="TailleMoins">TailleMoins</button>
<button id="TaillePlus">TaillePlus</button>
<button id="TailleDiv">TailleDiv</button>
<button id="Alert">Alert</button>

<div id="maDiv" align="center">
   <p>


Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.

Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.

Haec igitur prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene...

CSS

#maDiv {
  position: relative; /* on positionne le conteneur */
  cursor:pointer;   
  overflow: hidden; 
  text-align:center;  
  padding:0;
  margin:0;
  border:0;
  top:0;
  width:600px;
  line-height:normal;
  height:200px;
  background: red;
  overflow: scroll;
}

p {
  padding:0;
  margin:0;
  border:0;
  top:0; 
}

JavaScript

$("#Alert").on("click", function () { 

var hauteurLines =  parseInt($('#maDiv').css('line-height'));
var newHeight = parseInt($('#maDiv').css('height'));
var newHeight5 = Math.floor(200/hauteurLines); 

alert(hauteurLines);
alert(newHeight);
alert(newHeight5);

});




$("#TailleDiv").on("click", function () { 

var hauteurLines =  parseInt($('#maDiv').css('line-height'));
var newHeight = Math.floor(200/hauteurLines)*hauteurLines+4; 

var newHeight5 = Math.floor(200/hauteurLines); 

alert(newHeight5+" - " +hauteurLines);

    $("#maDiv").css({
        'height': newHeight+'px',
    }); 
});

$("#TaillePlus").on("click", function () {   
   var maTailPol = parseInt($("#maDiv").css('font-size'));      
   maTailPol=maTailPol+4;      
   $("#maDiv").css({'font-size': maTailPol + 'px'}); 
});

$("#TailleMoins").on("click", function () {   
   var maTailPol = parseInt($("#maDiv").css('font-size'));      
   maTailPol=maTailPol-4;      
   $("#maDiv").css({'font-size': maTailPol + 'px'}); 
});



$("#avant").on("click", function () {   
var de = $("#maDiv").scrollTop();
var de1 = $("#maDiv").height();
//alert(de+de1);
$("#maDiv").scrollTop(de+de1);

});

$("#arriere").on("click", function () {   
var de = $("#maDiv").scrollTop();
var de1 = $("#maDiv").height();
$("#maDiv").scrollTop(de-de1);

});