Плавная прокрутка к разделу на событии прокрутки только один раз - PullRequest
0 голосов
/ 06 февраля 2020

Я пытаюсь создать скрипт, который прокручивает к ближайшему разделу мышку при событии прокрутки. Цель состоит в том, чтобы создать разделы, имеющие высоту 100%, а затем прокрутить один раздел за раз. Я создал этот скрипт, он работает, но он нервный и есть задержка. Что я делаю не так?

let scrollDestList = jQuery(".scroll-dest");
let closestDestIdx = null;
let distancesFromMouse = [];

$(document).mousemove(e => {
  let t = [];
  scrollDestList.each((i, v) => {
    let vOffsets = $(v).offset();
    let height = $(v).height();

    let centerY = vOffsets.top + height / 2;
    t.push(Math.abs(e.pageY - centerY));
    let minDistance = Math.min.apply(Math, t);
    closestDestIdx = t.indexOf(minDistance);
    distancesFromMouse = t;
    console.log(closestDestIdx);
    console.log(distancesFromMouse);
  });
});

let lastSt = 0;
let isAnimRunning = false;
$(window).scroll(function(event) {
  event.preventDefault();

  let st = $(this).scrollTop();

  if (st > lastSt) {
    // downscroll code
    let navIdx = 0;

    if (closestDestIdx == scrollDestList - 1) navIdx = closestDestIdx;
    else navIdx = closestDestIdx + 1;

    setTimeout(() => {
      $("html").animate(
        {
          scrollTop: $(scrollDestList[navIdx]).offset().top
        },
        200
      );
    }, 50);
  } else {
    // upscroll code
    let navIdx = 0;

    if (closestDestIdx == 0) navIdx = closestDestIdx;
    else navIdx = closestDestIdx - 1;

    setTimeout(() => {
      $("html").animate(
        {
          scrollTop: $(scrollDestList[navIdx]).offset().top
        },
        200
      );
    }, 50);
  }
  lastSt = st;
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...