0

я по нажатию на один блок 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'));

    }
});

1 ответ 1

0

Замените

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.