Prevent scrolling back to first slide after scrolled past

Question

I'm using fullpage.js and was wondering how I would go about preventing the user from scrolling back to the initial (first) slide after they've scrolled past it?

I still want to be able to scroll between all subsequent slides as intended, but essentially remove the first slide once past it so that it cannot be scrolled back up (basically making the second slide the first, as if the first is no longer there).

Hopefully this makes sense? The first slide is basically an intro/video slide and I only want it shown on initial page load, then after scrolled passed for it to no longer be accessible.

Bardi Harborow · Answer 1 · 2015-04-23T08:03:57.587

1

EDIT: Turns out that this does not work. I am investigating, the accepted answer does not work either though, at least on Chrome 42. I have lodged a bug report.

According to the documentation, you can register an onLeave callback. You should be able to use this to .remove() the top slide when you scroll down. The solution would look something like this:

<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>

_{This is all theroetical as I have never used fullpage.js (looks neat though) and have therefore not tested this.}

edited Apr 23 '15 at 08:03

answered Apr 21 '15 at 14:50

Bardi Harborow

1,683
1
27
40

Nice idea! I didn't think to just remove the element altogether. I will give this a go and report back if it works. Thank you for the input. – shparkison Apr 21 '15 at 17:23
@shparkison, well you could `.css('display', 'none')`, but that seemed less elegant. – Bardi Harborow Apr 21 '15 at 17:24
Hmmm... neither of these solutions seem to work. It sounded good in concept, but it completely nukes the scrolling and ends up disabling all sections. I also tried to call the `.reBuild();` function after removing the slide, but still no luck. – shparkison Apr 21 '15 at 19:04
Ok. I'll go back to square one and see if I can find a solution. Could you try my last comment to see if that works? – Bardi Harborow Apr 21 '15 at 22:05
I did try to set `.css('display', 'none')` as you suggested and the result was the exact same as `.remove()` – shparkison Apr 21 '15 at 22:41
accepted answer working on Chrome 42 for Mac. What operating system are you using where that solution is not working? – shparkison Apr 23 '15 at 23:04

score 1 · Accepted Answer · answered Apr 22 '15 at 09:01

1

Just use setAllowScrolling whenever you arrive to the 2nd section:

$('#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

answered Apr 22 '15 at 09:01

Alvaro

37,936
23
138
304

Oh, nice! I was thinking about using that but was thinking it would prevent scrolling up from any slide. I like the way you did that. Thanks! – shparkison Apr 22 '15 at 13:43
It does work if you use a scroll with the mouse or swipe with your finger. It won't work with keyboard arrows if that's what you mean. – Alvaro Apr 23 '15 at 11:41
Out of curiosity, would this be possible to accomplish with pagePile? It seems I can eliminate scrolling altogether, but there is not option to only prevent a certain direction as there is in fullPage. – shparkison Apr 24 '15 at 20:51

Prevent scrolling back to first slide after scrolled past

2 Answers2