jquery Scroll Magic添加指示器插件不工作

q0qdq0h2 于 2023-01-30 发布在 jQuery

关注(0)|答案(2)|浏览(106)

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

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

jquery

来源：https://stackoverflow.com/questions/41441348/scroll-magic-add-indicators-plugin-not-working

2条答案

按热度按时间

bn31dyow1#

你有font-size: 0;，（我冒昧地清理了一下你的代码）。我还把触发器改为#home，而不是为了触发器，开始和结束指示器的清晰度。
jsfiddle
超文本标记语言

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

日本

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

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

赞(0）回复(0）举报 2023-01-30

zphenhs42#

我有类似的问题，当我把ScrollMagic CDN放在任何GSAP CDN上时，它就解决了，它工作起来很有魅力，所以我对有同样问题的人的建议是尝试移动CDN的位置。我希望它对你和其他人有效：）

赞(0）回复(0）举报 2023-01-30