为什么第二个电话在机车卷轴上不起作用？

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");
        }
    });