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

Question

我正在使用 fullpage.js 并且想知道我将如何防止用户在滚动过去后滚动回初始（第一张）幻灯片？

我仍然希望能够按预期在所有后续幻灯片之间滚动，但实质上是在第一张幻灯片经过它后将其删除，这样它就无法向上滚动（基本上使第二张幻灯片成为第一张幻灯片，就好像第一张幻灯片一样不再存在）。

希望这是有道理的？第一张幻灯片基本上是一张 intro/video 幻灯片，我只希望它在初始页面加载时显示，然后在滚动通过后无法再访问它。

Answer 1

编辑： 结果证明这是行不通的。我正在调查，尽管接受的答案也不起作用，至少在 Chrome 42 上是这样。我有 lodged a bug report.

根据the documentation, you can register an onLeave callback. You should be able to use this to .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

只要到达第 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

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

Prevent scrolling back to first slide after scrolled past

javascript

jquery

fullpage.js