Прокрутка вверх или вниз от секции к разделу автоматически

Question

Я пытаюсь реализовать что-то в JS, как показано ниже. На странице, каждый раз, когда я прокручиваю вверх или вниз, необходимо отобразить следующий div (раздел) в окне просмотра. Например, если я прокручиваю вниз, страница должна автоматически перейти к следующему разделу (div) и так далее. То же самое, когда я прокручиваю вверх. Каждый 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> 

Спасибо!

Answer 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; 
}); 

Answer 2

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

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

Как правило, вы будете отслеживать scroll event и после того, как пиксели 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 
})