Question

我正在使用fullpage.js并且想知道如何阻止用户滚动回到初始（第一张）幻灯片之后会怎么做？

我仍然希望能够按照预期在所有后续幻灯片之间滚动，但基本上删除第一张幻灯片一次，以便它不能向上滚动（基本上将第二张幻灯片放在第一张，好像第一张是没有那里更长。）

希望这有道理吗？第一张幻灯片基本上是一个介绍/视频幻灯片，我只希望它在初始页面加载时显示，然后滚动后传递给它不再可访问。

Answer 1

编辑：原来这不起作用。我正在调查，接受的答案不起作用，至少在Chrome 42上。我有lodged a bug report。

根据the documentation，您可以注册onLeave callback。向下滚动时，您应该能够使用此.remove()顶部幻灯片。解决方案看起来像这样：

<div class="section">
    <div class="slide" data-anchor="slide1"> Slide 1 </div>
    <div class="slide" data-anchor="slide2"> Slide 2 </div>
    <div class="slide" data-anchor="slide3"> Slide 3 </div>
    <div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>
<script>
    $('.section').fullpage({
        onLeave: function(index, nextIndex, direction) {    
            if (index == 1) {
                $(this).remove();
            }
        }
    });
</script>

_{这是所有的理论，因为我从未使用fullpage.js（看起来很整洁），因此没有对此进行测试。}

Answer 2

到达第二部分时，只需使用setAllowScrolling：

$('#fullpage').fullpage({
    afterLoad: function(anchorLink, index){
        //on load section 2...
        if(index == 2){
            $.fn.fullpage.setAllowScrolling(false, 'up');
        }else{
            $.fn.fullpage.setAllowScrolling(true, 'up');
        }
    }
});

Demo online

滚动过去后，防止滚动回到第一张幻灯片

2 个答案: