События и звонки с использованием Locomotive Scroll JS - PullRequest
Новая
       55

События и звонки с использованием Locomotive Scroll JS

0 голосов
/ 21 марта 2020

Я использую локомотивную прокрутку (https://github.com/locomotivemtl/locomotive-scroll) для создания эффекта плавной прокрутки.

Я пытаюсь понять события и вызовы, которые они упоминают в документах (см. Выше git url).

Пример HTML: 

<div data-scroll data-scroll-repeat data-scroll-speed="1" data-scroll-call="testEvent1" class="block" id="block1">
   block 1
</div>

<div data-scroll data-scroll-repeat data-scroll-speed="1" data-scroll-call="testEvent2" class="block" id="block2">
   block 2
</div>

Пример JS: 

scroll.on('call', func => {
    console.log("block1 triggered");
});

Это работает, и консольный журнал запускается, но как я могу разделить "testEvent" 1 и "testEvent2" для отдельного запуска?

Спасибо!

1 Ответ

0 голосов
/ 23 марта 2020

Для тех, кому это может помочь, ниже представлен подход, который я сейчас использую для достижения хорошего эффекта. 

//check object is in view
function checkVisible( elm, eval ) {
    eval = eval || "object visible";
    var viewportHeight = $(window).height(), // Viewport Height
        scrolltop = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();   

    if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
    if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}

Благодарен за поиск приведенного выше кода в этом посте: Вызов функции прокрутки только один раз

Затем я использовал это в своем проекте: 

scroll.on('call', func => {
    if (checkVisible($('#myID1'))) {
        //do something when myID1 is in view
        console.log("test myID1");
    } else if (checkVisible($('#myID2'))) {
        //do something when myID2 is in view
        console.log("test myID2");
    } else {
        // do nothing
    }
});

Может помочь кому-нибудь. Удачи!

...