Как сделать плавную анимацию страниц на js?

Question

[MarsFM]

Подскажите плз, как сделать анимицию страницы? чтобы стрницы по очереди скролились плавно.
https://codepen.io/MarsFM/pen/mYWLdd

var oneScreen = document.querySelector(".first_v_slide");
var twoScreen = document.querySelector(".second_v_slide");
var threeScreen = document.querySelector(".third_v_slide");

var verticalSlider = document.querySelector(".vertical_slider");

oneScreen.addEventListener("click", function() {
    scrollPage(oneScreen)
});
twoScreen.addEventListener("click", function() {
    scrollPage(twoScreen)
});

function scrollPage(elem) {
    const coord = elem.getBoundingClientRect(); 
    var start = Date.now();
    var timer = setInterval(function() {
        var time = 500;
        var timePassed = Date.now() - start;
        if (timePassed >= time) {
            clearInterval(timer);
            return;
        }
        const value = time / coord.bottom; // 2000 / 400 = 5 
        const offsetY = timePassed / value
        window.scrollTo(0, offsetY);
    }, 20);
}

Answer 1

[hzzzzl]

это длинное и запутанное можно поменять на

function scrollPage(elem) {
  window.scrollTo({
    top: elem.offsetTop,
    left: 0,
    behavior: 'smooth'
  });
}

https://developer.mozilla.org/en-US/docs/Web/API/W...

и мини-решение как отправная точка
https://codepen.io/anon/pen/JqWvqo?editors=0010

Comments

[MarsFM]

Спасибо) чуть-чуть код изменил

function scrollPage(elem) {
    window.scrollTo({
      top: elem.offsetHeight + elem.offsetTop,
      left: 0,
      behavior: 'smooth'
    });
};

[MarsFM]

Пытался поправить ваш кусок кода, так и не получилось(
Тут проскакивает div по середине, скроллит либо первый или последний.
Можете плз, показать как это можно исправить?

if (e.wheelDelta < 0) {
    current = current + 1 > slides.length - 1 ? slides.length - 1 : current + 1
    console.log('down', current)
  } else {
    current = current - 1 < 0 ? 0 : current - 1
    console.log('up', current)
  }

[hzzzzl]

MarsFM, он не проскакивает, попробуй медленно прокрутить мышку "на одно деление" как бы :)

я просто проверяю, крутят вверх или вниз e.wheelDelta < 0
а по факту там у e.wheelDelta цифровое значение "на сколько прокрутили"

[MarsFM]

hzzzzl, да мышкой медленно получилось, я просто touchpad-ом кручу)
там проскакивает, а каким путём можно сделать, что даже бытро прокрутил это один экран будет?

[hzzzzl]

MarsFM, ну собственно поэтому и советуют уже готовые библы использовать :D
но короче вот,
https://codepen.io/anon/pen/yWbqwV?editors=0110

что я сделал:
замеряю когда юзер проскроллил в последний раз, и каждый раз смотрю - если уже скроллил за последние 300 мс, то не делаю ничего, иначе скроллю

window.addEventListener('mousewheel', e => {
  if (new Date() - lastScroll < 300) return
  lastScroll = new Date()
  ....

подробнее в гугле по слову throttle
https://medium.com/nuances-of-programming/%D1%87%D...

[MarsFM]

hzzzzl, спасибо большое) буду разбираться

Answer 2

[Михаил Иванов]

Здравствуйте, если вам надо на всю высоту экрана, секцию делать, то я бы посоветовал вам скрипт fullPage

Comments

[MarsFM]

Здравсвуйте, мне надо нативно это сделать)