Вызывать функцию при скроле мышки

@maxon-by · Регистрация: 06.10.2015

Author24 — интернет-сервис помощи студентам

Доброго всем, форумчане!
Есть проблема/, которую я не могу понять как решить.
Начало положено, но вот как усовенршенствовать не могу понять.

В чём суть: есть лендинг с несколькими секциями на всю ширину экрана. без скролла. Есть кнопка "Next Slide", которая включает следующую секцию и отключает предыдущую.

Сайт http://nirkov.ru/ezm/

Но теперь надо сделать тоже самое только при скролле мышки. Скролл вниз- открывается следующий блок, закрывается предыдущий. При скролле вверх - аналогично наоборот.

На данный момент я сделал скролл только на один слайд вверх / вниз. Как доделать, чтобы все скролились в нужном порядке я что-то сообразить не могу.

Часть кода который отвечает за кролл прикрепил ниже.
Спасибо всем за помощь!!

Javascript

 window.addEventListener('load', function() {
        var scrollStatus = {
            wheeling: false,
            functionCall: false
        };
        var scrollTimer = false;
        window.addEventListener('wheel', function(e) {
            scrollStatus.wheeling = true;
            if (!scrollStatus.functionCall) {
                //parseScroll here
                console.log(e.deltaY);
 
                if (e.deltaY > 0) {
                    // крутим колёсиком вниз
                    s2()
                }
 
                if (e.deltaY < 0) {
                    // крутим колёсиком вверх
                    s1()
                }
 
 
                scrollStatus.functionCall = true;
            }
            window.clearInterval(scrollTimer);
            scrollTimer = window.setTimeout(function() {
                scrollStatus.wheeling = false;
                scrollStatus.functionCall = false;
            }, 50); //set this millisecond to your liking
        });
    });

и события / функции, которые должны выполняться по порядку
s1, s2, s3, s4, s5

Javascript

/* Pages slides */
    $('a[href="#home"]').on('click', function(e){
        e.preventDefault();
        s1();
    });
    $('a[href="#about"]').on('click', function(e){
        e.preventDefault();
        s2();
    });
    $('a[href="#gallery"]').on('click', function(e){
        e.preventDefault();
        s3();
    });
    $('a[href="#services"]').on('click', function(e){
        e.preventDefault();
        s4();
    });
    $('a[href="#contact"]').on('click', function(e){
        e.preventDefault();
        s5();
    });

Добавлено через 4 часа 4 минуты
Разобрался... может поможет кому....

Javascript

if (e.deltaY < 0 && i>=1) {
                        //Колесо вверх
                        i=i-1;
                    }
                    if (e.deltaY > 0 && i<=5) {
                        i=i+1;
                        //Колесо вниз
                    }
 
                    switch (i) {
                        case 1:
                            s2();
                            break;
                        case 2:
                            s3();
                            break;
                        case 3:
                            s4();
                            break;
                        case 4:
                            s5();
                            break;
                    }

итого: получился лендинг со слайдами (переключение по слайдам / секциям на всю страницу без бокового скролла) переключение между слайдами при помощи скролла мыши.

Всем удачи!

	28.02.2019, 18:50

Опции темы