fullPage.js 和 ScrollMagic 之间的冲突

Question

在尝试实现以下输出https://drive.google.com/file/d/1uS21T4rjQfhm0ZIYUShMBI2-jHT0evxC/view 时，我在使用 fullPage.js 和 ScrollMagic 时遇到了问题

这在正常滚动中完美无缺。

我正在使用的代码

HTML5

<div id="fullpage">
    <div class="section" id="section0">
        section 1 content
    </div>
    <div class="section section-one" id="section1">


            <h1 class="header-class">Hands on activity</h1>
            <div class="abcde" style="background-color: darkgoldenrod; overflow: hidden">
                <div class="left-holder" style="display: block; float:left; width: 15%;">
                    <p>Terry's sent you a business card for a new customer she has just singed up. Let's add them into Terry's client file.</p>
                    <p>Pre request goes here</p>
                    <br /><br />
                    <div class="instruction" style="height: 450px; background-color: yellow; display: block;">
                        <<< Start of Instructions >>><br/><br/><br/>content goes here<br/><br/><br/>
                        content goes here<br/><br/><br/>content goes here<br/><br/><br/>content goes here<br/><br/><br/>
                        content goes here<br/><br/><br/>content goes here<br/><br/><br/>
                        content goes here<br/><br/><br/>content goes here<br/><br/><br/>
                        <<< End of Instructions >>>
                    </div>
                </div>
                <div id="iframe-holder" style="float: right; width: 80%; height: 750px; background-color: yellowgreen">iframe content goes here ... </div>
            </div>
            <div style="margin-top:300px">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies ipsum vitae sapien tincidunt bibendum. Aliquam tempor cursus
            </div>


    </div>
    <div class="section" id="section2">
        <div class="intro">
            <h1>No limitations!</h1>
            <p>Content is a priority. Even if it is so large :)</p>
        </div>
    </div>
</div>

JS

    (function ($) {
   var realHeight = $('.instruction')[0].scrollHeight;
   var height = $('.instruction').height();
   var scrollableHeight = realHeight - height;
   var offset = $('.header-class').outerHeight(true) - 10;

    var containerN = new ScrollMagic.Controller({container: "#section1"});
    var scene = new ScrollMagic.Scene({ offset: offset, duration: scrollableHeight})
        .addTo(containerN)
        .setPin(".abcde");

    $('#fullpage').fullpage({
            });

}(jQuery))

Answer 1

使用 fullpage.js 选项 scrollBar:true 或 autoScrolling:false。

阅读fullPage.js FAQs 了解更多信息。