Делаю свою кастомную прокрутку и столкнулся с такой проблемой: не могу понять, как работает скролл, а точнее "что происходит при кручении колёсика дважды и более".
Сейчас у меня есть такое:
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?
vverh
, второе, почему бы просто не дизейблить скролл, пока не закончилась анимация?