Блог

Главная - Вопросы по программированию - Автоматическая прокрутка вверх или вниз от раздела к разделу

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

#javascript #jquery #html #css #parallax

#javascript #jquery #HTML #css #параллакс

Вопрос:

Я пытаюсь реализовать что-то в JS, подобное следующему. На странице каждый раз, когда я прокручиваю вверх или вниз, должен отображаться следующий div (раздел) в окне просмотра. Например, если я прокручиваю страницу вниз, страница должна автоматически переходить к следующему разделу (section) и так далее. То же самое при прокрутке вверх. Каждый div (раздел) имеет высоту окна просмотра, чтобы показывать полное содержимое div (раздела) при каждой прокрутке вверх или вниз. Имеет ли это смысл? Кто-нибудь может подсказать, достижимо ли это и как?

Код может быть следующим:

 <div class"container">
<div class="section"> content </div> <!-- viewport height -->
<div class="section"> content </div> <!-- viewport height -->
<div class="section"> content </div> <!-- viewport height -->
<div class="section"> content </div> <!-- viewport height -->
<div class="section"> content </div> <!-- viewport height -->
</div>

Спасибо!

Ответ №1:

Лично я бы рекомендовал не прокручивать панели в поле зрения при прокрутке, они непоследовательны и неудобны в использовании, особенно на таких устройствах, как трекпады или другие «мыши» с ускорением прокрутки.

Однако решение jQuery для прокрутки одного порта просмотра за раз может выглядеть следующим образом:

 var lastScrollTop = 0;
$(window).scroll(function(event){
  var scrollTop = $(this).scrollTop();
  if (scrollTop > lastScrollTop){
    $("html,body").animate({
      scrollTop: $("html,body").css("scrollTop")   $(".section").first().height()
    }, 500);
  } else {
    $("html,body").animate({
      scrollTop: $("html,body").css("scrollTop") - $(".section").first().height()
    }, 500);
  }
  lastScrollTop = scrollTop;
});

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

1. Я пробовал ваш пример, но страница остается на месте без прокрутки

Ответ №2:

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

Если вы хотите сделать это вручную, вам нужно сравнить значение element.scrollTop со значением window.pageYOffset и использовать window.scrollY() для изменения положения страницы.

Как правило, вы будете отслеживать событие прокрутки и после прокрутки x пикселей за y секунд (обязательно отмените прокрутку) либо переходите к следующему div, либо обратно к текущему div, чтобы сохранить привязку к краю.

Грубая идея была бы:

 window.addEventListener('scroll', e => {
  // set/debounce timer
  // check scroll direction
  // check if pageYOffset is > or < than current section scrollTop
  // scrollY to current, next, or previous section
})