Как сделать прокрутку div на jquery?

05 февраля 2021, 03:30

я по нажатию на один блок div, динамически создаю текстовый блок в котором сообщения, и соответственно есть прокрутка! как сделать чтоб этот динамически добавленный блок прокручивался вниз??? создание блока при нажатии:

$(document).on('click','#message', function (e) { //открываем окно сообщений для того чтоб написать или ответить
    var e_id = $(this).attr('data');
    if($('#'+e_id).length === 0) {
        chatBox.append('<div class="chatcont" id="chatcont_'+usersDataInChatList[e_id]['id']+'"><div class="headerMessageBox"><div class="userData"><div class="msgUserLogo"><a href="/profile/full/'+usersDataInChatList[e_id]['id']+'" title="'+usersDataInChatList[e_id]['lastname']+' '+usersDataInChatList[e_id]['name']+'"><img src="/'+usersDataInChatList[e_id]['user_img']+'" /></a></div><div class="msgUserLogin">'+usersDataInChatList[e_id]['login']+'</div></div><div class="closeMessageBox" id="closeBoxChat" data = "'+usersDataInChatList[e_id]['id']+'"><i class="fa fa-times"></i></div></div><div class="messageBlock" data="'+usersDataInChatList[e_id]['id']+'"></div><div><textarea class="textarea" id="send_'+usersDataInChatList[e_id]['id']+'"></textarea><div class="sendmsg" id="sendmsg" data="'+usersDataInChatList[e_id]['id']+'"><i class="fa fa-plus"></i></div></div></div>');
        // тут я пишу код для прокрутки вниз который не срабатывает.
        var block = $('.messageBlock[data='+usersDataInChatList[e_id]['id']+']');
        block.scrollTop(block.prop('scrollHeight'));
    }
});

Answer 1

Замените

var block = $('.messageBlock[data='+usersDataInChatList[e_id]['id']+']');

На

var block = chatBox.find('.messageBlock[data='+usersDataInChatList[e_id]['id']+']');

Нечто похожее на пример

let block = $('.block'), data = 123456; 
 
$('input').on('click', function(){ 
  block.append('<div class="append" data="'+data+'"><div class="height"></div></div>'); 
 
  let blockAppend =  block.find('.append[data="'+data+'"]'); 
  blockAppend.scrollTop(blockAppend.prop('scrollHeight')); 
});

.block { 
  display: block; 
  width: 300px; 
  height: 150px; 
  background: gray; 
  padding: 10px; 
  box-sizing: border-box; 
  overflow: hidden; 
} 
 
.block .append { 
  display: block; 
  width: 100%; 
  height: 100%; 
  overflow: hidden auto; 
  background: green; 
} 
 
.append > .height { 
  width: 100%; 
  height: 500px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<input type="button" value="click"> 
<div class="block"></div>