Jquery прокрутить до нижней части div - PullRequest
Новая
       13

Jquery прокрутить до нижней части div

0 голосов
/ 07 июня 2019

Я реализую приложение чата с php, html, css и jquery. Я бы хотел, чтобы окно чата прокручивалось до последнего элемента чата на document.onload (однако это система обмена сообщениями в приватном чате, поэтому будут сообщения отправителя и получателя). Я уже искал решения и когда есть определенное количество сообщений - div прокручивает только до определенного количества. Ниже приведены некоторые фрагменты кода. Любая помощь приветствуется. 

(document).ready(function(){
    $("html,body").animate({ scrollTop: $(".right-header-contentChat").position().top }, 1000);});

<div class="row">
  <div id="scrolling_to_bottom" class="col-md-12 right-header-contentChat">


  </div>
</div>

.right-header-contentChat{ 
    overflow-y: scroll; 
    background-color: #FFFFFF; 
    position: relative; 
}

Это результат, когда я обновляюсь:

https://i.imgur.com/SIqRmKJ.png

Ответы [ 2 ]

0 голосов
/ 07 июня 2019 

$(function () 
{
  $('.chat-area').animate({scrollTop: $('.chat-area')[0].scrollHeight}, 1000);
});
.chat-area
{
height: 200px;
overflow:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat-area">
  <p>Chat message</p>
   <p>Chat message</p> 
   <p>Chat message</p> 
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Chat message</p>
   <p>Last message</p>
</div>

Вы можете попробовать как упоминание в примере. Я надеюсь, что вы могли бы найти свое решение.

0 голосов
/ 07 июня 2019

Попробуйте прокрутить вниз

$ ("html, body"). Animate ({scrollTop: $ (document) .height ()}, 1000); 

$(document).ready(function(){
     $("html, body").animate({ scrollTop: $(document).height() }, 1000);
    });
.right-header-contentChat{ 
    overflow-y: scroll; 
    background-color: #FFFFFF; 
    position: relative; 
} 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div id="scrolling_to_bottom" class="col-md-12 right-header-contentChat">
<div><p>hi</p></div>
<div><p>hi1</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>
<div><p>hi</p></div>

  </div>
</div>
...