Автоматическая прокрутка вниз страницы

Автоматическая прокрутка страницы или блока может быть полезна при постоянном выводе контента (чат, постоянный вывод текста и т.д.), сделать такую прокрутку легко:

setInterval(function() {          
	window.scrollTo(0, document.body.scrollHeight);
}, 1000);
JS
Или более плавная прокрутка на методе jQuery animate():
setInterval(function(){   
	$('html,body').animate({scrollTop: $('html,body').get(0).scrollHeight}, 1000);
}, 1000);
JS

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

var timer;
var isPaused = false;

$(window).on('wheel', function(){
	isPaused = true;
	clearTimeout(timer);
	timer = window.setTimeout(function(){
		isPaused = false;
	}, 1000);   
});

window.setInterval(function(){          
	if(!isPaused){
		window.scrollTo(0, document.body.scrollHeight);
	}
}, 500);
JS

Результат:

<div id="box">...</div>
HTML
#box {
	border: 1px solid #ddd;
	padding: 0 20px;
	overflow: auto;
	height: 150px;
}
CSS
var timer;
var isPaused = false;

$(window).on('wheel', function(){
	isPaused = true;
	clearTimeout(timer);
	timer = window.setTimeout(function(){
		isPaused = false;
	}, 1000);   
});

window.setInterval(function(){          
	if(!isPaused){
		$("#box").scrollTop($("#box")[0].scrollHeight);
	}
}, 500);
JS

Результат:

12.10.2021, обновлено 22.12.2022
15672
Следующая запись Пауза в setInterval()

Комментарии 2

webbot webbot
25 ноября 2021 в 11:16
Круто, создал свой чат на PHP и хотел сделать ету прокрутку но не знал как ви мне очень помогли
Aizhamal Mamasydykova Aizhamal Mamasydykova
25 мая 2022 в 16:46
@Но данные примеры не позволят прокрутить страницу вверх, ползунок всегда будет возвращаться вниз. Поэтому необходимо выключать автопрокрутку при скроллинге.
Как выключать автопрокрутку при скроллинге?

, чтобы добавить комментарий.

Другие публикации

Появление элемента в области просмотра браузера
Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
50830
+13
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
13297
+3
После отправки формы сохранить позицию скролла
В больших формах, с несколькими кнопками «Отправить/сохранить» есть одна проблема – после ее отправки браузер обновит...
11707
+4
Подгрузка контента при прокрутке (бесконечная лента)
Пример реализации «Бесконечной ленты» с применением PHP, БД MySQL, и JQuery Ajax.
38505
+17
Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
55597
+3
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
47473
+35