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

你有.parent { height: 200px; border: 1px solid red; display: flex; align-items: center; justify-content: center; }，（我冒昧地清理了你的代码）。我还将触发器更改为font-size: 0;，而不仅仅是为了清除触发器，开始和结束指示器。

jsfiddle

HTML

#home

CSS

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

JS

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

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

1 个答案: