JavaScript: Автоматическая прокрутка скролла вниз

Дата: 10.11.2016 в 01:44, Категория: JavaScript
  • 1760
  • 5
JavaScript: Автоматическая прокрутка скролла вниз

Порой захожу на сайт Toster.ru, чтобы ответить тем, кому требуется помощь по JS || PHP. И недавно нашел вопрос, связанный с прокруткой скролла вниз на 30px, каждые 4 секунды. Я не знаю, для чего автору это нужно, но я реализовал данный пример на JSBin. И хотел бы поделиться этим примером, в своем блоге.

Так как экспорт примера с JSBin у меня не импортируется в блог, я создал пример на Codepen. При разработке движка своего блога, я решил не юзать HTML вставку, для самописного BBCode редактора.

Последнее время, я юзаю шаблонизатор PugJS (Jade). Уж больно, он понравился и значительно упрощает разработку HTML кода. В своем примере, я использую PugJS и бояться, что данный пример не будет работать на ваших проектах, не стоит.

Если вы не понимаете его синтаксиса (что в принципе нереально для любого верстальщика, ибо синтаксис очень понятен), вы можете кликнув на стрелочку в разделе HTML, выбрать "View Compiled HTML", чтобы увидеть скомпилированный код на HTML. (Пример решил опубликовать на сайте Codepen).

При клике на кнопку "Спуститься вниз", запускается функция scrollDown(), которая скроллит документ на 30px вниз. Имеется так же событие на прокрутку документа window.onscroll. Который завершает прокрутку, до момент конца скролла.

Еще заметил, что многие интересуется функцией для определения скролла до самого конца. К примеру, это требуется, когда на сайте нужно сделать вывод новых записей при скролле.

window.onscroll = function(e){
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       // Ваш код, который выполнится при скролле до самого конца
    }
}