Как привязать окно пользователя к концу страницы?

Question

Как привязать окно пользователя к концу страницы, без анимаций (они слишком долгие, даже если 1 ms сделать в animate(scrollTop)), чтобы логи, которые я вывожу при помощи jquery, видел пользователь

$('#container').html(html);

чтобы выглядело примерно как в консольке, когда идет лог, автоматически перелистывается страничка вниз без анимаций и тп

Answer 1

Если без анимации, то прокручиваем вниз так:

$('#container').scrollTop(Number.MAX_SAFE_INTEGER)

Или без jQuery:

element.scrollTop = element.scrollHeight

Этого достаточно, чтобы реализовать любую логику работы с консолью. Например, так:

add.onclick = (e) => {
  let tolerance = 10;
  let bottomPos = cons.scrollHeight - cons.clientHeight - cons.scrollTop;
  cons.innerHTML += '<div>message ' + Math.random() + '</div>';

  if (bottomPos < tolerance)
    cons.scrollTop = cons.scrollHeight;
};

#cons {
  width: 500px;
  height: 145px;
  border: 1px solid;
  overflow: auto;
  overflow-x: hidden;
}

<div id="cons"></div>
<button id="add">Добавить</div>

Пользователь можно спокойно прокручивать историю, и ему ничего не будет мешать. Если пользователь прокрутит вниз, то контент будет автоматически скролиться с учетом tolerance.

Если без скролов, можно привязать абсолютно позиционированный дочерний блок к нижней части окна:

add.onclick = (e) => {
  content.innerHTML += '<div>message ' + Math.random() + '</div>';
};

#console {
  width: 500px;
  height: 145px;
  border: 1px solid;
  position: relative;
  overflow: hidden;
}

#content {
  position: absolute;
  bottom: 0;
  left: 0;
}

<div id="console">
  <div id="content"></div>    
</div>
<button id="add">Добавить</div>

Но в этом случае, нет полосы прокрутки справа. Если она все-таки нужна, то можно применить хитрость. Мы переворачиваем вверх ногами окно и тоже самое делаем с вложенным блоком:

add.onclick = (e) => {
  content.innerHTML += '<div>message ' + Math.random() + '</div>';
};

#console {
  width: 500px;
  height: 145px;
  border: 1px solid;
  position: relative;
  overflow: scroll;
  overflow-x: hidden;
  transform: scale(1, -1);
}

#content {
  transform: scale(1, -1);
}

<div id="console">
  <div id="content"></div>    
</div>
<button id="add">Добавить</div>

При добавлении данных прокрутка будет держаться. Но это извращение, колёсико мышки будет работать в реверсе. Поэтому используйте первый вариант и будет счастье.

БЛОГ НА HUSL

Как привязать окно пользователя к концу страницы?

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