Блог

У меня есть следующий код…

 <div class="jrg-wrapper-main" data-scroll-section>
    <jrg-splash data-scroll
                data-scroll-id="splash"
                data-scroll-call="splash"
    ></jrg-splash>
    <jrg-sidebar data-scroll
                 data-scroll-id="blog"
                 data-scroll-call="sidebar"
                 data-scroll-speed="2"
                 url="./site.config.json"
    ></jrg-sidebar>
</div>
...
<script src="https://unpkg.com/locomotive-scroll"></script>
<script type="module">
    console.log("Let us try this");
    const scroll = new window.LocomotiveScroll();
    scroll.on("call", args=>{
        console.log(`Called with ${JSON.stringify(args)}`)
    });
    scroll.on('scroll', (args) => {
        if (typeof args.currentElements['splash'] === 'object') {
            console.log("The call was fired");
        } else {
            console.log("Somewhere else");
        }
    });
</script>
 

Когда я запускаю это, я вижу…

Вызывается с помощью «splash»

Но даже после прокрутки вниз до области боковой панели я не вижу ожидаемого…

Вызывается с помощью «боковой панели»

Также я никогда не вижу, чтобы событие прокрутки работало.

Чего мне не хватает?

Полная кодовая база

Обновить

Я также пытался использовать модульную прокрутку напрямую, например…

 import modularScroll from "https://unpkg.com/modularscroll@1.0.7/dist/main.esm.js";
const scroll = new modularScroll();
scroll.on("call", args=>{
    console.log(`Called with ${JSON.stringify(args)}`)
});
 

Но ни один из вызовов не печатается таким образом.

Обновление 2

Вот более простая версия того, что я пытаюсь сделать с divs вместо веб-компонентов…

Используйте ‘call’ вместо scroll

 scroll.on('call', (args) => {
        if (typeof args.currentElements['splash'] === 'object') {
            console.log("The call was fired");
        } else {
            console.log("Somewhere else");
        }
    });