locomotive-scroll - 为什么第二个电话在机车滚动中不起作用？

Question

我有以下代码...

<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>

当我运行它时，我看到...

用“飞溅”来称呼

但即使在我向下滚动到侧边栏区域后，我也看不到预期的......

用“侧边栏”调用

我也从来没有看到滚动事件起作用。

我错过了什么？

完整的代码库

更新

我也尝试过直接使用模块化滚动...

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

这是我尝试用 div 而不是 Web 组件做的一个更简单的版本......

Answer 1

使用“呼叫”而不是滚动

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