Прокрутка вниз при append

Question

Когда append() добавляет новый контент в блок, то пользователь его не видит. Нужно проскроллить вниз, чтобы увидеть добавленный контент.

<div class="col-md-8 mb-2" id="container_load">...</div>
<script>
  function load(count) {
    $.get("....", {count:count},onAjaxSuccess);
    
    function onAjaxSuccess(data) {
      $('#container_load').append(data);
    }
  }
</script>

Как автоматически проскроллить блок, после добавления контента?

Answer 1

Попробуйте так:

<div class="col-md-8 mb-2" id="container_load">...</div>
<script>
  function load(count) {
    $.get("....", {count:count},onAjaxSuccess);
    
    function onAjaxSuccess(data) {
      $('#container_load').append(data);
      $($(data).attr("id").scrollIntoView();
    }
  }
</script>

Для этого элемента data надо будет только добавлять id, чтобы его можно было считать и прокрутить к нему. $(data).attr("id") получает id элемента и прокручивате ровно до этого элемента. Вот ссылка на scrollIntoView

Answer 2

Я не знаю какой именно объект вы предпочитаете скроллить. Это скорее всего <html> или <body>. В общем, работать будет даже если добавить оба варианта:

document.body.scrollTop = document.body.scrollHeight;
document.documentElement.scrollTop = document.documentElement.scrollHeight;

document.querySelector('button').addEventListener('click',e=>{
  const div = document.createElement('div');
  div.innerHTML='appended data';
  div.className = 'appended';
  document.querySelector('.viewport').appendChild(div);
  document.documentElement.scrollTop = document.documentElement.scrollHeight;
  document.body.scrollTop = document.body.scrollHeight;
});

* {box-sizing: border-box; }
html{ overflow-y: scroll;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI5MCI+CjxnIHRyYW5zZm9ybT0ic2NhbGUoMSAxLjUpIj4KPHJlY3Qgd2lkdGg9Ijk5IiBoZWlnaHQ9Ijk5IiBmaWxsPSIjNmQ2OTVjIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI0Mi40MiIgaGVpZ2h0PSI0Mi40MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAgMCkgcm90YXRlKDQ1KSIgZmlsbD0iIzYyNWY1MyI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iOTkiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIiBmaWxsPSIjNzE2ZjY0Ij48L3JlY3Q+CjxyZWN0IHdpZHRoPSI5OSIgaGVpZ2h0PSIxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYwKSByb3RhdGUoLTQ1KSIgZmlsbD0iIzcxNmY2NCI+PC9yZWN0Pgo8L2c+Cjwvc3ZnPg==");

/* Для плавного скроллинга */
scroll-behavior: smooth; }
.viewport .big { height: 4000px; }
.viewport .appended {
  color: #fff;
  text-shadow: 1px 1px 1px #000;
}

<div class="viewport">
  <button>Append</button>
  <div class="big">
  </div>
</div>

БЛОГ НА HUSL

Прокрутка вниз при append

Ответы (2 шт):