Прокрутить по Блокам

Question

У меня есть 2 полноэкранных размера div элементов. Я хочу, чтобы они были похожими на слайды, поэтому, если пользователь немного прокручивается, он прокручивается до второго div, если пользователь прокручивает его вверх, он прокручивается вверх.

Однако он не работает. Я не могу прокручивать вверх, но он работает на прокрутке вниз. Я новичок в jQuery, подробные ответы были бы приятными.

var lastScrollTop = 0; 
 
$(window).scroll(function(event) { 
 
    var st = $(this).scrollTop(); 
 
    if (st > lastScrollTop) { 
 
    $('html body').animate({ 
 
     scrollTop: $('#scrollHere').offset().top 
 
    }, 1000); 
 
    } else { 
 
    $('html body').animate({ 
 
     scrollTop: 0 
 
    }, 1000); 
 
    } 
 
    lastScrollTop = st; 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.box { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background: tomato; 
 
} 
 
.blue { 
 
    background: skyblue; 
 
}

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
<div class="box blue"></div> 
 
<div class="box" id="scrollHere"></div>

Answer 1

Это немного больше, чем скорость анимации и хорошо, позвольте мне сказать «редкий» концепцию пользовательского интерфейса. Переопределение поведения прокрутки по умолчанию - это потеря основного элемента управления моим взаимодействием со страницей. Так или иначе.

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

Second: Лучше отделить прослушиватель событий прокрутки (обнаружение направления прокрутки) от взаимодействия (я использовал таймаут с небольшой задержкой). Результат работает, но, как я уже говорил, это странно.

var lastScrollTop = 0; 
var isScrolling = false; 
var timer = null; 

// method to initialize and handle the scroll override 
function triggerScroll(direction) { 
    // do not proceed in case we have an active timer 
    if (timer) {return;} 
    // get target position 
    var topPos = (direction === 'down') ? $('#scrollHere').offset().top : 0; 
    // run this with a little delay 
    timer = setTimeout(function() { 
     $('html body').animate({ 
      scrollTop: topPos 
     }, 1000, function() { 
      // animation done - reset everything 
      isScrolling = false; 
      clearTimeout(timer); 
      timer = false; 
      lastScrollTop = $(window).scrollTop(); 
     }); 
    },50); 
} 

// your event listener - detects direction 
$(window).scroll(function(event) { 
    // do not proceed if we already have a scroll event 
    if(isScrolling) {return;} 
    var st = $(this).scrollTop(); 
    if (st >= lastScrollTop) { 
    // delegate to sep. function 
    triggerScroll('down'); 
    } else { 
    triggerScroll('up'); 
    } 
    lastScrollTop = st; 
    isScrolling = true; 
}); 

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