Проскролить в самый низ в чате

#javascript #jquery

Здравствуйте такая проблема есть блок с сообщениями высотой 400px в него добавлено
css свойство overflow-y: scroll; и блок прокручивается вниз только на 400px а как сделать
чтобы прокручивался в самый низ
вот сам код 



$('.message-block').animate({
  scrollTop: $('.message-block').height()
});
.message-block {
    position: sticky;
    background-color: #eef2f4;
    height: 400px;
    overflow-y: scroll;
    padding-top: 10px;
    border-radius: 10px;
}
.text-sender-read {
    background-color: #8bda84;
    width: 60%;
    padding: 5%;
    border-radius: 30px;
}
.text-sender-unread {
    box-shadow: 0px 0px 14px 2px #3675d8;
 }
.sender{
	position: relative;
}

.incoming {
position: relative;
}

.text-incoming {
    background-color:rgba(173, 164, 172, 0.31);
    width: 60%;
    padding: 5%;
    border-radius: 30px;
    float: right;
}

.page_square_photo {
        position: relative;
    display: inline-block;
    height: 82%;
    border-radius: 50%;
    border: 3px solid #b6cada;
    width: 70px;
    /* margin-left: 6px; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.page_photos_module {
    padding: 5px 0px 20px;
    height: 110px;
    
}
.inline-message {
        display: table-row-group;
}




	
tyhrgedwsqa uyjthgr4fewq








	
yhtrgeythrgfe







rbtefdw





	
yhtg4rfew






	
tyhrge







rtgefw





	
ytyhrgwe tyhrgew






	
yhtrg4e







yuujthrge





	
hrtgefw







y4tre





	
jtyhr4e







ytehrg4ew






trew






rthgweqq






rgefwq






yujthtr4e






y54r






trgedw






jyhtg4re






yutjhrg4e






yujthgr4e






gfbvrweqq





	
y5t4re







jyhtgrteww






tyhrgew






ymtnhrgeww





	








оноеркп4






yt4r






nrtberewfdqq





	
tjyhrgf4e







jyhty4r





	
ujy4tr






	
yhtg4re







jhy4gtre





	
trhgfew






	
jyh5g4re







jythrg4fe






tyrhge






hrtgewww






hngrtgrwe





	
hgrgtewqw







trhgweq






    

Ответы

Ответ 1

Вот как я сделал, добавил еще один контейнер в ваших сообщениях теперь они в контейнере
с классом message-block-inner. и у него высота автоматически ровно высоты его содержимого.
И изменил прокрутку и сделал прокрутку до конца этого блока с классом (message-block-inner).



$('.message-block').animate({
  scrollTop: $('.message-block-inner').height()
});
.message-block {
    position: sticky;
    background-color: #eef2f4;
    height: 400px;
    overflow-y: scroll;
    padding-top: 10px;
    border-radius: 10px;
}
.text-sender-read {
    background-color: #8bda84;
    width: 60%;
    padding: 5%;
    border-radius: 30px;
}
.text-sender-unread {
    box-shadow: 0px 0px 14px 2px #3675d8;
 }
.sender{
	position: relative;
}

.incoming {
position: relative;
}

.text-incoming {
    background-color:rgba(173, 164, 172, 0.31);
    width: 60%;
    padding: 5%;
    border-radius: 30px;
    float: right;
}

.page_square_photo {
        position: relative;
    display: inline-block;
    height: 82%;
    border-radius: 50%;
    border: 3px solid #b6cada;
    width: 70px;
    /* margin-left: 6px; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.page_photos_module {
    padding: 5px 0px 20px;
    height: 110px;
    
}
.inline-message {
        display: table-row-group;
}





	
tyhrgedwsqa uyjthgr4fewq








	
yhtrgeythrgfe







rbtefdw





	
yhtg4rfew






	
tyhrge







rtgefw





	
ytyhrgwe tyhrgew






	
yhtrg4e







yuujthrge





	
hrtgefw







y4tre





	
jtyhr4e







ytehrg4ew






trew






rthgweqq






rgefwq






yujthtr4e






y54r






trgedw






jyhtg4re






yutjhrg4e






yujthgr4e






gfbvrweqq





	
y5t4re







jyhtgrteww






tyhrgew






ymtnhrgeww





	








оноеркп4






yt4r






nrtberewfdqq





	
tjyhrgf4e







jyhty4r





	
ujy4tr






	
yhtg4re







jhy4gtre





	
trhgfew






	
jyh5g4re







jythrg4fe






tyrhge






hrtgewww






hngrtgrwe





	
hgrgtewqw







trhgweq






Ответ 2

function animated_scroll(block, delay = 2222){
  let y = block.scrollTop; // Откуда начинаем прокручивать
  const dest = block.scrollHeight -block.offsetHeight;  // До куда надо прокрутить
  const interval = 1000 / 24; // 24 fps)) 
  const delta = (dest - y) * (interval/delay); // Сколько надо прокрутить за шаг,
чтобы за время delay успеть прокрутить до куда надо
  // Поехали
  (function scroll(){
    if(y < dest){
      y += delta;
      block.scrollTop = y;
      setTimeout(scroll, interval);
    }// else мы уже на месте
  })();
}


animated_scroll(document.querySelector('.message-block'))
.message-block {
    position: sticky;
    background-color: #eef2f4;
    height: 400px;
    overflow-y: scroll;
    padding-top: 10px;
    border-radius: 10px;
}
.text-sender-read {
    background-color: #8bda84;
    width: 60%;
    padding: 5%;
    border-radius: 30px;
}
.text-sender-unread {
    box-shadow: 0px 0px 14px 2px #3675d8;
 }
.sender{
	position: relative;
}

.incoming {
position: relative;
}

.text-incoming {
    background-color:rgba(173, 164, 172, 0.31);
    width: 60%;
    padding: 5%;
    border-radius: 30px;
    float: right;
}

.page_square_photo {
        position: relative;
    display: inline-block;
    height: 82%;
    border-radius: 50%;
    border: 3px solid #b6cada;
    width: 70px;
    /* margin-left: 6px; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.page_photos_module {
    padding: 5px 0px 20px;
    height: 110px;
    
}
.inline-message {
        display: table-row-group;
}




	
tyhrgedwsqa uyjthgr4fewq








	
yhtrgeythrgfe







rbtefdw





	
yhtg4rfew






	
tyhrge







rtgefw





	
ytyhrgwe tyhrgew






	
yhtrg4e







yuujthrge





	
hrtgefw







y4tre





	
jtyhr4e







ytehrg4ew






trew






rthgweqq






rgefwq






yujthtr4e






y54r






trgedw






jyhtg4re






yutjhrg4e






yujthgr4e






gfbvrweqq





	
y5t4re







jyhtgrteww






tyhrgew






ymtnhrgeww





	








оноеркп4






yt4r






nrtberewfdqq





	
tjyhrgf4e







jyhty4r





	
ujy4tr






	
yhtg4re







jhy4gtre





	
trhgfew






	
jyh5g4re







jythrg4fe






tyrhge






hrtgewww






hngrtgrwe





	
hgrgtewqw







trhgweq







P.S. jQuery не нужен