JSFiddle - React, Tailwind, and code Playground

by FrOnDaL

HTML

<div id="chat"></div>
<div id="scrolly">0</div>
<div id="scrolly2">0<div>
<div id="fark">0</div>

CSS

#chat{
    width:300px;
    height:150px;
    overflow-x:hidden;
}

JavaScript

//İlk başta scrollu en sona aldık
var scrollHeight = $("#chat").prop("scrollHeight");
$("#chat").scrollTop(scrollHeight);

//scrolly değişkenini ilk konumunu aldık
var scrollY =  $("#chat").scrollTop();

setInterval(function(e){
    $("#chat").scroll(function () {
        
         /*scroolY = $("#chat").prop('scrollHeight');*/
        
        //Scroll hareket ederse ki en son konumunu aldık
        //scrolly ye eşitledik
       scrollY =  $("#chat").scrollTop();
        
        $("#scrolly").html("Son konum : "+scrollY);
        
    });
},1000);

var i = 0;
setInterval(function(){
    //scrollHeiht ile en son büyüklük oranını aldık
    var scrollHeight = $("#chat").prop('scrollHeight');
    i++;
    $("#chat").append("yazi yazi yazi yazi yazi "+i+"<br />");
    
    if((scrollHeight-scrollY)==$("#chat").height()){
        $("#chat").scrollTop(scrollHeight);
    }else{
        $("#chat").scrollTop(scrollY);
        
    }
    $("#scrolly2").html("Olması gereken : "+scrollY);
    $("#fark").html("Fark :"+(scrollHeight-scrollY));
},1500);