冲突的库:整页.js和 ScrollMagic 问题

Conflicting libraries: Fullpage.js and ScrollMagic issue

本文关键字：ScrollMagic 问题 js 整页 冲突      更新时间：2023-09-26

所以我正在制作一个具有不同部分的垂直视差滚动网站，我想在它们之间导航。所以我选择了ScrollMagic作为视差，fullpage.js用于导航。我已经在我的标题中包含fullpage.js CSS文件。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.7/jquery.fullPage.css">

问题是当我尝试同时拥有它们时。所以我在<body>标签之间的代码是 

<div id="fullpage">
        <div class="spacer s0"></div>
        <div class="section">
            <div id="parallax1" class="parallaxParent">
                <div style="background-image: url(img/bcg_slide-1.jpg);">
                </div>  
            </div>
        </div>
        <div class="spacer s1">
            <div class="box2 blue">
                <p>Content 1</p>
            </div>
        </div>
        <div class="spacer s0"></div>
        <div class="section"></div>
            <div id="parallax2" class="parallaxParent">
                <div style="background-image: url(img/bcg_slide-2.jpg);"></div>
            </div>
        <div class="spacer s1">
            <div class="box2 blue">
                <p>Content 2</p>
            </div>
        </div>
        <div class="spacer s0"></div>
        <div class="section">
            <div id="parallax3" class="parallaxParent">
                <div style="background-image: url(img/bcg_slide-3.jpg);"></div>
            </div>
        </div>
        <div class="spacer s2"></div>
        <div id="trigger1" class="spacer s0"></div>
        <div>
        <svg height="150" width="460" style="position: absolute; z-index: 10;">
            <path id="line" d="M 100 100 l 360 0" stroke="red" stroke-width="3" fill="none" />
              <!-- Mark relevant points -->
              <g stroke="black" stroke-width="3" fill="black">
                <circle id="pointA" cx="100" cy="100" r="3" />
                <circle id="pointB" cx="450" cy="100" r="3" />
              </g>
              Sorry, your browser does not support inline SVG.
            </svg>
        </div>
        <div id="fp-nav" class="right" style="margin-top: -33.5px;">
            <ul id="nav">
                <li>
                    <a href="#parallax1" class=""><span></span></a>
                    <div class="fp-tooltip right">First</div>
                </li>
                <li>
                    <a href="#parallax2" class=""><span></span></a>
                    <div class="fp-tooltip right">Second</div>
                </li>
                <li>
                    <a href="#parallax3" class=""><span></span></a>
                    <div class="fp-tooltip right">Third</div>
                </li>
            </ul>
        </div>
    </div>

在底部，我在关闭</body>标签之前声明我的 jquery 库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/_main.js"></script>
<script src="js/fullpage.js"></script>

我想有一个平滑的滚动到部分。也许还有其他方法可以做到这一点。我肯定需要Scollmagic因为我将绘制SVG's并制作其他需要触发器的动画

如果你看一下整页.js常见问题解答，你会发现这个：

视差不适用于整页.js。

简短回答：使用整页的scrollBar:true选项.js如果您不想使用自动滚动功能，请使用autoScrolling:false。

说明：视差以及许多其他依赖于网站滚动的插件会监听javascript的scrollTop属性。 fullPage.js实际上并没有滚动网站，但它会更改网站的top或translate3d属性。只有在使用 fullPage.js 选项时，scrollBar:true或autoScrolling:false它才会以 scrollTop 属性可以访问的方式实际滚动网站。

相关文章：