Fullpage.js

Question

我已经设置 fullpage.js 但想要能够滚动到某个部分的功能，并且如果满足某些条件则在下一个滚动中显示同一部分中的新元素。下一个卷轴不应进入下一节。

使用回调我已经能够确定某个部分何时需要第二次滚动。根据文档，我什至可以在滚动发生之前取消滚动，因此无需进入下一节即可显示新元素。问题是允许它在那之后移动到下一部分。我要么让它停止滚动，但不再能够再次滚动，要么文本在滚动到下一部分时出现，因为任何类型的标志都可以更改，并且在下一个滚动上多次触发，因此它会立即离开该部分。

        //HTML - typical fullpage.js section

        <div class="section">
            <div>
                <h1>Default Text</h1>
                <p class="hidden-text">Additonal text to appear on second scroll</p>
            </div>
        </div>
        <div class="section">
            <div>
                <h1>Next Section</h1>
            </div>
        </div>

        //fullpage.js - the callbacks being used

        afterLoad: function(anchorLink, index){
            preventScroll = false;
            if(this.has(".hidden-text").length){
                preventScroll = true;
            }
        },
        onLeave: function(index, nextIndex, direction){
            if (preventScroll && direction == "down") { 
                this.find('.hidden-text').addClass('animate-text');
                this.find('.hidden-text').removeClass('hidden-text');
                return false;
            }
        },

Codepen 在这里找到：http://codepen.io/anon/pen/oxEexY

Answer 1

您必须添加逻辑才能知道隐藏文本何时显示。添加超时或其他内容。然后在发生这种情况时将标志 preventScroll 更改为 true。

在这种情况下，我假设文本在 1 秒（1000 毫秒）后显示：

Reproduction online

此外，请注意我是如何使用 $(this) 而不是 this。

Fullpage.js - 防止滚动

Fullpage.js - Prevent scroll