Scroll Magic 添加指标插件不起作用

Question

我最近开始使用 ScrollMagic 库。当我尝试在我的程序中使用 addIndicators 插件时，它无法正常工作。触发指示器由一个非常小的蓝色勾号给出（与开始和结束指示器相同）。我的代码如下。

HTML :

<body>
    <div id="container">
        <section id="landing">                                                              
        </section>
        <section id="home">             
        </section>
    </div>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> 
</body>

CSS :

            body, html {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            body {
                width: 300%;
                overflow-y: hidden;
                overflow-x: scroll;
                margin: auto;   
                white-space: nowrap;
                font-size: 0;
            }
            #container {
                height: 100%;
                width: 100%;
                display:block;  
            }
            section {
                position: relative;
                display: inline-block;
                text-align: center;
                height: 100vh;
                width: 150vw;
            }
            #landing {
                background-color: yellow;
            }
            #home {
                background-color: orange;
            }

JQuery :

var controller = new ScrollMagic.Controller({vertical: false});
var scene = new ScrollMagic.Scene({triggerElement: "#landing", duration: "150%", triggerHook: 0})
            .setPin("#landing")
            .addIndicators()                
            .addTo(controller);

我也尝试了没有容器的代码，但是没有用。我需要添加什么，或者我写错了什么代码顺序？

https://jsfiddle.net/zjapLcx4/1/

Answer 1

你有 font-size: 0;，（我冒昧地清理了一下你的代码）。我还将触发器更改为 #home 而不是为了清楚触发器、开始和结束指示器。

jsfiddle

html

<div id="container">
  <section id="landing"></section>
  <section id="home"></section>
</div>

css

body {
  width: 300%;
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
}

js

var controller = new ScrollMagic.Controller({
  vertical: false
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#home",
    duration: "150%"
  })
  .setPin("#home")
  .addIndicators()
  .addTo(controller);

Scroll Magic 添加指标插件不起作用

Scroll Magic add indicators plugin not working

jquery

scrollmagic