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

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

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-блока

<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
180
Следующая запись Пауза в setInterval()

Комментарии

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

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

Появление элемента в области просмотра браузера
Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
24850
+10
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
8313
+5
После отправки формы сохранить позицию скролла
В больших формах, с несколькими кнопками «Отправить/сохранить» есть одна проблема – после ее отправки браузер обновит...
6453
+2
Подгрузка контента при прокрутке (бесконечная лента)
Пример реализации «Бесконечной ленты» с применением PHP, БД MySQL, и JQuery Ajax.
9525
+8
Фиксированная шапка таблицы при прокрутке
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
22960
+2
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
20462
+22