В fullpage.js есть платное дополнение для горизонтального скролла колёсиком мыши. Хочу доработать этот скролл стандартными средставами.
<section id="fullpage" class="fullpage">
<section class="vertical-scrolling">
<div class="horizontal-scrolling section section_1">
1
</div>
<div class="horizontal-scrolling section section_2">
2
</div>
<div class="horizontal-scrolling section section_3">
3
</div>
<div class="horizontal-scrolling section section_4">
4
</div>
<div class="horizontal-scrolling section section_5">
5
</div>
</section>
</section>
const triggerFullPage = () => {
new fullpage('#fullpage', {
anchors: ['presentation'],
menu: '.main_menu',
sectionSelector: '.vertical-scrolling',
slideSelector: '.horizontal-scrolling',
controlArrows: false,
afterLoad: function () {
},
});
}
triggerFullPage();
$('#fullpage').on('wheel', function (event) {
if (event.originalEvent.deltaY !== 0) {
if (event.originalEvent.deltaY < 0) {
$('.horizontal-scrolling').removeClass('active');
$('.section_1').addClass('active');
} else {
if (window.location.href.indexOf('#presentation') != -1) {
$('.horizontal-scrolling').removeClass('active');
$('.section_2').addClass('active');
}
if (window.location.href.indexOf('#presentation/1') != -1) {
$('.horizontal-scrolling').removeClass('active');
$('.section_3').addClass('active');
}
}
}
});
Ловлю событие скролла и пытаюсь скролить слайды, hash url слайдов такой:
#presentation
#presentation/1
#presentation/2
#presentation/3
#presentation/4
Хочу в зависимости от hash менять класс, но и hash нужно менять при скролле колесом мыши. Он меняется только если нажать на меню fullpage.js.
Как грамотно это сделать? Может через цикл?
