Здравствуйте такая проблема есть блок с сообщениями высотой 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;
}
Ответ
Вот как я сделал, добавил еще один контейнер в ваших сообщениях теперь они в контейнере с классом 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;
}
Комментариев нет:
Отправить комментарий