javascript - 使用 Javascript 滚动淡入淡出 - 自动滚动到部分末尾的速度太快

Question

我正在处理一个包含三个部分的 fullpage.js。

我把scrollOverflow 设置为true 因为第三部分的内容有点长。第三部分的第一个元素必须在用户向下滚动时淡出，第二个元素必须在第一个元素淡出之前淡入。

仍在处理淡出部分，但我遇到了问题，因为它自动向下滚动得太快了。

不确定是我的 javascript 代码本身有问题(我完全是初学者)还是 fullpage.js 有问题。

index.html

<div id="header">Header</div>
    <div id="fullpage">
        <div class="section" id="section0">
            <p>
                Eu nec ferri molestie consequat, vel at alia dolore putant. Labore philosophia ut vix. In vis nostrud interesset appellantur, vis et tation feugiat scripserit. Te nec noster suavitate persecuti. Diceret erroribus cu vix, alii omnes ei sit. Sea an corrumpit patrioque, virtute accumsan nominavi et usu, ex mei dolore vocibus incorrupte.

                Duo ea saperet tacimates. Sed possim prodesset no, per novum putent doctus ea. Eu mea magna aliquip graecis, pri corpora officiis complectitur ei, lorem saepe consetetur his ad. Meis consulatu ei vis, an altera ocurreret interesset qui.

                Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an, no has epicuri verterem. Nam at animal pertinax efficiantur.

                Per alienum torquatos eu. Sed saepe quodsi et, ullum choro definitionem sed et. Ullum elitr comprehensam sed at, sint illum propriae per eu. Eu enim laudem reformidans vel. Pro clita quando ad. Usu te virtute quaestio, ut eruditi tacimates volutpat per.

                Affert accusamus duo ex, ea pri habeo graece, cu magna dolorum sea. Quas dictas assueverit ad qui, cu duo harum fabulas apeirian, ullum gubergren et sit. Ne cetero recusabo adipiscing quo, cu harum quaestio neglegentur cum. Has tation aliquip ad, virtute volumus definitionem mel ne. Nobis audiam civibus ius at.

                Ei eum hinc mutat inciderint. Cu maluisset assentior per, graecis ponderum no mel. Eum eu vitae quando gloriatur, cum graece percipitur no, sed errem maiestatis te. Sed porro epicuri te, ad nam malorum verterem. Ea zril aliquip euismod sed.
            </p>
        </div>
        <div class="section" id="section1">
            <p>             
                Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an, no has epicuri verterem. Nam at animal pertinax efficiantur.

                Per alienum torquatos eu. Sed saepe quodsi et, ullum choro definitionem sed et. Ullum elitr comprehensam sed at, sint illum propriae per eu. Eu enim laudem reformidans vel. Pro clita quando ad. Usu te virtute quaestio, ut eruditi tacimates volutpat per.

                Affert accusamus duo ex, ea pri habeo graece, cu magna dolorum sea. Quas dictas assueverit ad qui, cu duo harum fabulas apeirian, ullum gubergren et sit. Ne cetero recusabo adipiscing quo, cu harum quaestio neglegentur cum. Has tation aliquip ad, virtute volumus definitionem mel ne. Nobis audiam civibus ius at.

                Ei eum hinc mutat inciderint. Cu maluisset assentior per, graecis ponderum no mel. Eum eu vitae quando gloriatur, cum graece percipitur no, sed errem maiestatis te. Sed porro epicuri te, ad nam malorum verterem. Ea zril aliquip euismod sed.
            </p>
        </div>
        <div class="section" id="section2">
            <h1 class="fade-scroll">Fade Me Away</h1>
            <p class="fade-scroll">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio velit, condimentum vel pulvinar sed, mollis at tortor. Nam congue turpis mi, in ultricies dolor mattis non. Donec molestie ante arcu, eget congue quam tincidunt in. Nullam et dignissim felis. Proin iaculis lectus eget dui tincidunt, laoreet pharetra diam varius. Aliquam ullamcorper volutpat gravida. Sed pharetra ac risus a tristique. Vestibulum et blandit orci, non sollicitudin nunc. Sed ut nulla massa. Fusce nec erat eu neque egestas maximus. Proin sit amet ultrices elit, vitae tempor felis. Vivamus egestas efficitur metus, in elementum odio aliquet et. Vestibulum semper eros orci, non accumsan turpis convallis sit amet. Donec rutrum efficitur velit quis auctor.
            </p>

            <div>
                <h1 class="fade-scroll">Lorem ipsum</h1>
                <h1 class="fade-scroll">Lorem ipsum dolor sit amet</h1>
                <p class="fade-scroll">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <img src="img/img-1.jpg" class="fade-scroll"/>
                <h1 class="fade-scroll">Lorem ipsum</h1>
            </div>


            <div>
                <h1 class="fade-scroll">Lorem ipsum dolor sit amet</h1>
                <p class="fade-scroll">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
                <img src="img/img-2.jpg" class="fade-scroll"/>
            </div>


            <div>
                <p class="fade-scroll">
                    Eu nec ferri molestie consequat, vel at alia dolore putant. Labore philosophia ut vix. In vis nostrud interesset appellantur, vis et tation feugiat scripserit. Te nec noster suavitate persecuti. Diceret erroribus cu vix, alii omnes ei sit. Sea an corrumpit patrioque, virtute accumsan nominavi et usu, ex mei dolore vocibus incorrupte.Duo ea saperet tacimates. Sed possim prodesset no, per novum putent doctus ea. Eu mea magna aliquip graecis, pri corpora officiis complectitur ei, lorem saepe consetetur his ad. Meis consulatu ei vis, an altera ocurreret interesset qui.

                    Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an, no has epicuri verterem. Nam at animal pertinax efficiantur.

                    Per alienum torquatos eu. Sed saepe quodsi et, ullum choro definitionem sed et. Ullum elitr comprehensam sed at, sint illum propriae per eu. Eu enim laudem reformidans vel. Pro clita quando ad. Usu te virtute quaestio, ut eruditi tacimates volutpat per.

                    Affert accusamus duo ex, ea pri habeo graece, cu magna dolorum sea. Quas dictas assueverit ad qui, cu duo harum fabulas apeirian, ullum gubergren et sit. Ne cetero recusabo adipiscing quo, cu harum quaestio neglegentur cum. Has tation aliquip ad, virtute volumus definitionem mel ne. Nobis audiam civibus ius at.

                    Ei eum hinc mutat inciderint. Cu maluisset assentior per, graecis ponderum no mel. Eum eu vitae quando gloriatur, cum graece percipitur no, sed errem maiestatis te. Sed porro epicuri te, ad nam malorum verterem. Ea zril aliquip euismod sed.
                </p>
                <p class="fade-scroll">
                    Eu nec ferri molestie consequat, vel at alia dolore putant. Labore philosophia ut vix. In vis nostrud interesset appellantur, vis et tation feugiat scripserit. Te nec noster suavitate persecuti. Diceret erroribus cu vix, alii omnes ei sit. Sea an corrumpit patrioque, virtute accumsan nominavi et usu, ex mei dolore vocibus incorrupte. Duo ea saperet tacimates. Sed possim prodesset no, per novum putent doctus ea. Eu mea magna aliquip graecis, pri corpora officiis complectitur ei, lorem saepe consetetur his ad. Meis consulatu ei vis, an altera ocurreret interesset qui.

                    Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an, no has epicuri verterem. Nam at animal pertinax efficiantur.

                    Per alienum torquatos eu. Sed saepe quodsi et, ullum choro definitionem sed et. Ullum elitr comprehensam sed at, sint illum propriae per eu. Eu enim laudem reformidans vel. Pro clita quando ad. Usu te virtute quaestio, ut eruditi tacimates volutpat per.

                    Affert accusamus duo ex, ea pri habeo graece, cu magna dolorum sea. Quas dictas assueverit ad qui, cu duo harum fabulas apeirian, ullum gubergren et sit. Ne cetero recusabo adipiscing quo, cu harum quaestio neglegentur cum. Has tation aliquip ad, virtute volumus definitionem mel ne. Nobis audiam civibus ius at.

                    Ei eum hinc mutat inciderint. Cu maluisset assentior per, graecis ponderum no mel. Eum eu vitae quando gloriatur, cum graece percipitur no, sed errem maiestatis te. Sed porro epicuri te, ad nam malorum verterem. Ea zril aliquip euismod sed.
                </p>
                <p class="fade-scroll">
                    Eu nec ferri molestie consequat, vel at alia dolore putant. Labore philosophia ut vix. In vis nostrud interesset appellantur, vis et tation feugiat scripserit. Te nec noster suavitate persecuti. Diceret erroribus cu vix, alii omnes ei sit. Sea an corrumpit patrioque, virtute accumsan nominavi et usu, ex mei dolore vocibus incorrupte. Duo ea saperet tacimates. Sed possim prodesset no, per novum putent doctus ea. Eu mea magna aliquip graecis, pri corpora officiis complectitur ei, lorem saepe consetetur his ad. Meis consulatu ei vis, an altera ocurreret interesset qui.

                    Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an, no has epicuri verterem. Nam at animal pertinax efficiantur.

                    Per alienum torquatos eu. Sed saepe quodsi et, ullum choro definitionem sed et. Ullum elitr comprehensam sed at, sint illum propriae per eu. Eu enim laudem reformidans vel. Pro clita quando ad. Usu te virtute quaestio, ut eruditi tacimates volutpat per.

                    Affert accusamus duo ex, ea pri habeo graece, cu magna dolorum sea. Quas dictas assueverit ad qui, cu duo harum fabulas apeirian, ullum gubergren et sit. Ne cetero recusabo adipiscing quo, cu harum quaestio neglegentur cum. Has tation aliquip ad, virtute volumus definitionem mel ne. Nobis audiam civibus ius at.

                    Ei eum hinc mutat inciderint. Cu maluisset assentior per, graecis ponderum no mel. Eum eu vitae quando gloriatur, cum graece percipitur no, sed errem maiestatis te. Sed porro epicuri te, ad nam malorum verterem. Ea zril aliquip euismod sed.
                </p>
           </div>
        </div>
    </div>

js

$(document).ready(function() {
                $('#fullpage').fullpage({
                    /*  anchors: ['firstPage', 'secondPage', '3rdPage'],  */
                    lockAnchors: true,
                    sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
                    css3: true,
                    navigation: true,
                    navigationPosition: 'right',
                    fadingEffect: true,
                    scrollOverflow: true
                });
                $(function() {
                    var documentEl = $(document),
                        fadeElem = $('.fade-scroll');
                        documentEl.on('scroll', function() {
                        var currScrollPos = documentEl.scrollTop();
                        fadeElem.each(function() {
                            var $this = $(this),
                                elemOffsetTop = $this.offset().top;
                            if (currScrollPos > elemOffsetTop) $this.css('opacity', 1 - (currScrollPos-elemOffsetTop)/400);
                        }); 
                    });
                });

            });

style

/* Centered texts in each section
* --------------------------------------- */
.section{
    text-align:center;
}

/* Fixed header and footer.
* --------------------------------------- */
#header {
    position:sticky;
    height: 50px;
    display:block;
    width: 100%;
    background: #333;
    z-index:9;
    text-align:center;
    color: #f2f2f2;
    padding: 20px 0 0 0;
    top:0px;
}

* {
    margin: 0;
    padding: 0;
}
h1 {
    font-weight: 300;
    font-size: 4em;
    color: #fff;
    background-color: #071d36;
    padding: 300px 0 50px 100px;
    margin-bottom: 150px;
}
p {
    width: 30%;
    margin: 0 auto 500px auto;
    font-size: 1.4em;
    color: #555;
    font-weight: 300;
}

Answer 1

FullPage.js 不会让您将事件监听器附加到滚动，除非您将参数 autoScrolling 设置为 false。

一种方法是，在您的选项中设置:

afterLoad: function(anchorLink, index){
   if(index === 3{ //When you are scrolling in the third section disable autoscrolling
      $.fn.fullpage.setAutoScrolling(false);
   }else{ //enable when you are scrolling in the other sections
      $.fn.fullpage.setAutoScrolling(true);
   }
},