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

您必须添加逻辑以了解隐藏文本何时显示。添加timeOut或其他东西。然后在发生这种情况时将标记preventScroll更改为true。

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

Reproduction online

另外，请注意我使用$(this)而不是this的方式。

Fullpage.js - 防止滚动

1 个答案: