1

Делаю свою кастомную прокрутку и столкнулся с такой проблемой: не могу понять, как работает скролл, а точнее "что происходит при кручении колёсика дважды и более".

Сейчас у меня есть такое:

for (var i = 0; i < 100; i++) {
  $('.wrap').append('<div class="box"></div>');
}

var per1 = 0, // переменная
  per2 = 0, // переменна
  shag = 300, // Величина шага
  step = shag, // Динамическое значение шага
  speedscroll = 0.7, // Скорость движения
  vverh = "+=",
  vniz = "-=",
  direction = 0; // Направление движения


// Проверка направления прокрутки
function checkDir() {
  if (direction != per2) {
    step = shag;
  }
}

// Фукция самого скролла
function minescroll(direct, speedscroll, step) {
  per1 = 1;
  TweenMax.to(
    '.wrap',
    speedscroll, {
      y: direct + step,
      ease: Power2.easeOut,
      onComplete: function() {
        per1 = 0;
        step = shag; // Возврат скорости в исходное положение
      }
    });
}

$(window).bind('wheel', function(event) {
  // условие при двойном кручении
  if (per1 == 1) {
    step = step + shag;
  } else {
    step = shag;
  }

  // Запоминание последнего направления
  per2 = direction;

  // ------- ВНИЗ
  if (event.originalEvent.deltaY >= 0) {
    direction = 2;
    checkDir();
    minescroll(vniz, speedscroll, step);
    // ------- ВВЕРХ
  } else {
    direction = 1;
    checkDir();
    minescroll(vverh, speedscroll, step);
  }
});
body {
  background: #20262E;
  font-family: Helvetica;
  overflow: hidden;
}

.box {
  width: 290px;
  height: 290px;
  background: #777;
  margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<div class="wrap"></div>

Логика такая. Есть per1. При начале кручения он принимает значение 1, в конце анимации срабатывает код onComplete: function() {per1 = 0;}. При условии, когда per1 == 1 размер расстояния увеличивается на 1 шаг.

Проблема заключается в том, что если крутить колёсиком на 0.5 секунде (скорость анимации = 0.7), то через несколько таких прокруток вы улетите далеко вниз.

Если совсем убрать условие IF, то прокрутка будет рывками, а мне нужна плавность.

Вообще я стремлюсь вот к такому результату: maxlepinskih.com/prices , но я не понимаю, как это сделано у него. В его коде разобраться не смог.

И ещё нюанс один. Мне, чтобы оно плавно работало, нужно было убрать overflow у body, а в примере по ссылке у него плавно и сколлбар есть...

Скажите, как должно быть устроено условие IF, чтобы получилось, как у maxlepinskih?

3
  • Вот пример на JSFIDDLE jsfiddle.net/drkrol/mtvhrdgb/7
    – firebear
    Commented 20 мая 2019 в 19:52
  • первое - никогда не называете переменные vverh, второе, почему бы просто не дизейблить скролл, пока не закончилась анимация?
    – ThisMan
    Commented 21 мая 2019 в 9:17
  • > Если совсем убрать условие IF, то прокрутка будет рывками, а мне нужна плавность. или вы так пытались, но получился такой результат?
    – ThisMan
    Commented 21 мая 2019 в 9:19

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Посмотрите другие вопросы с метками или задайте свой вопрос.