Skip to content

Normal scrolling after one section #614

@agaletta

Description

@agaletta

Hi, I have a scrolling vertical section in 100% height of viewport for each section. Under last section i have a footer. I would set autoScrolling to false when i'm in last section because i need to set normal scrolling behaviour and then, in direction up, re-set autoScrolling to true.

My code:

  var actualIndexSlide;
  var totalSlides = $('main > section.section').length;
  $('#main').fullpage({
    // autoScrolling: true,
    css3: true,
    verticalCentered: false,
    touchSensitivity: 15,
    easing: 'easeInCirc',
    normalScrollElements: '.fd-footer',
    resize: false,
    scrollingSpeed: 700,

    afterRender: function(){
      console.log("rendered");
      $('main > section').css('height','auto');
    },

    afterResize: function(){
      console.log("resize");
      $('main > section').css('height','auto');
    },

    afterLoad: function(anchor, index){
      actualIndexSlide = index;
      // console.log("after load | anchor:"+anchor+" | index: "+index);
      if(actualIndexSlide == totalSlides) {
        // $.fn.fullpage.scrollOverflow(false);
        $.fn.fullpage.setAutoScrolling(false);
      }
    },

    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
    console.log("hereeee");
    },

    onLeave: function(index, newIndex, direction){
      console.log("nuova "+newIndex);
      console.log(index+"-"+totalSlides);
      console.log(direction);
      if(direction == "up" && index == totalSlides) {
        // $.fn.fullpage.moveSectionUp();
        $.fn.fullpage.moveTo(newIndex);
        setTimeout(function() {
          $.fn.fullpage.setAutoScrolling(true);
        }, 1300);
      }
    }

  });

When i'm coming from last slide in up direction to second-to-last i have a flickering.
I have 2 problem: afterSlideLoad not firing, never! And a blank page in google chrome on MAC.

Any solutions?
Thanks and sorry for my english! :)

Activity

changed the title [-]setAutoscrollin true/false[/-] [+]setAutoscrolling true/false[/+] on Aug 4, 2014
alvarotrigo

alvarotrigo commented on Aug 4, 2014

@alvarotrigo
Owner

It's not easy to do what you are looking for.

I would recommend you to try it by using an scrollable DIV in the last section to simulate the normal scrolling behavior and then, by using your own touch and mousewheel handler events, detect when it reaches the top of the DIV and then slide up.

You would also need to remove the handlers as well at some point.

If you have troubles doing so, I could help you with it for some price. But it should be done with external code to the plugin.

agaletta

agaletta commented on Aug 4, 2014

@agaletta
Author

Thanks for reply.
It's a strange behaviour because it's seems ok right now only for flickering when i scroll-up from last to secont-to-last slide!
What about afterSlideLoad callback that is not firing, instead?

Thanks

changed the title [-]setAutoscrolling true/false[/-] [+]Normal scrolling after one section[/+] on Aug 14, 2014
sidonaldson

sidonaldson commented on Oct 26, 2014

@sidonaldson

Try this instead:

start by adding this to css: body{padding-right:17px;}

add a html footer outside of #fullPage div

then JS:

$(document).ready(function() {
        var st = 0,
        fixThreshold = 20,
        numberOfItems = $('#fullpage .section').length;
        function reenableScroll(){
            $.fn.fullpage.setAutoScrolling(false);
            $(document.body).css('padding-right',0);
            st = $(window).scrollTop();
            $(window).on('scroll.fix', scrollHandler);
        }
        function scrollHandler(){
            if($(window).scrollTop() < st - fixThreshold){
                $.fn.fullpage.setAutoScrolling(true);
                $(document.body).css('padding-right',17);
                $(window).off('scroll.fix');
            };
        }
        $('#fullpage').fullpage({
            css3: true,
            afterLoad: function(anchorLink, index){
                console.log("afterLoad",anchorLink, index);
                if(index === numberOfItems)reenableScroll();
            }
        });
    });

seems to work ok for me but I'm not testing it other than chrome

markadrake

markadrake commented on Nov 19, 2015

@markadrake

+1 for this functionality. I'm working on the implementation of a design where the brand wants to use fullpage.js to communicate it's message one "slide" at a time, but when you reach the last slide (which is full page of course) the footer of the site cannot be reached. I'd like to suggest this be a feature that's implemented into the core project.

alvarotrigo

alvarotrigo commented on Nov 19, 2015

@alvarotrigo
Owner

the footer of the site cannot be reached. I'd like to suggest this be a feature that's implemented into the core project.

You can always use fp-auto-height for the footer as in this example.

dangelion

dangelion commented on Dec 8, 2015

@dangelion

+1

rahulmax

rahulmax commented on Jan 7, 2016

@rahulmax

👍 You're right, @alvarotrigo I was looking for this functionality for the footer and fp-auto-height achieves this. Better experience than switching to normal scroll just for the footer.

28 remaining items

s10wen

s10wen commented on Mar 3, 2018

@s10wen

I think I have a similar issue. I have multiple slides, then I'd like 'normal' scroll for a large footer (that allows all the content to be shown).

The following demo works well for a small footer:
https://alvarotrigo.com/fullPage/examples/autoHeight.html#3rdPage

I've created a demo for the issue I'm having with the large footer:
https://codepen.io/s10wen/pen/eVoMga

Thanks in advance for any help :)

alvarotrigo

alvarotrigo commented on Mar 4, 2018

@alvarotrigo
Owner

@s10wen use scrollOverflow:true. Then place all your "normal" content in your last section. That will emulate the behaviour you want. hybrid and fp-normal-scroll are not supported features.

s10wen

s10wen commented on Mar 5, 2018

@s10wen

@alvarotrigo jackpot! Is there a way to manipulate the .fp-nav as so:

.section .header-slide = no nav
.section .slide-one = nav starts on 1 (and shows 3)
.section .slide-two = nav 2 (and shows 3)
.section .slide-one = nav ends on 3 (and shows 3)
.section .footer-slide = no nav

p.s. I found #1110 but it looks like the demo is a 404 http://jsfiddle.net/97tbk/512/

alvarotrigo

alvarotrigo commented on Mar 5, 2018

@alvarotrigo
Owner

Make use of fullPage.js state classes or callbacks for that.
Check this video tutorial I did regarding css3 conditions based on fullpage.js state classes.

taraskhvyl

taraskhvyl commented on Sep 15, 2018

@taraskhvyl

The hybrid feature works great. Except if you scroll in your demo from slide1 to slide2 auto-scroll is enabled. But if you scroll up from slide2 to slide1 auto-scroll is disabled. Is there any way to enable auto-scroll if you scroll from a section with normal-scroll to a section with auto-scroll? Thanks.

hi. this is actual question. any updates on it? how can i make auto scroll from 2-nd section?

thank you

alvarotrigo

alvarotrigo commented on Sep 15, 2018

@alvarotrigo
Owner

any updates on it?

If there were any, you'd see my comment on it.
But you can't see any right? Then there's none :)

taraskhvyl

taraskhvyl commented on Sep 17, 2018

@taraskhvyl

any updates on it?

If there were any, you'd see my comment on it.
But you can't see any right? Then there's none :)

I can share my fast solution for it. Maybe it will help somebody :)

`
let allowScrollTop = false;

$('#fullpage').fullpage({
	hybrid:true,
	fitToSection: true,
    
	afterLoad : function( anchorLink, index) {
	    
	    if(index === 2) {
			allowScrollTop = true;
		}
	}
});

$(window).on('scroll', function() {
	let scrollTop = $(window).scrollTop();
    
	if((firstScreenHeight > scrollTop) && (allowScrollTop === true)) {
		$.fn.fullpage.moveSectionUp();
		allowScrollTop = false;
	}
});

`

maartenvanhunsel

maartenvanhunsel commented on Feb 2, 2019

@maartenvanhunsel

@taraskhvyl Do you have an example to show?

alvarotrigo

alvarotrigo commented on Apr 11, 2022

@alvarotrigo
Owner

This is finally possible now in v4! 🥳 👯 🕺 🎈

It took 7 years and a half but we got there!! :)
I'll be adding examples soon.

alekskravchenko

alekskravchenko commented on Apr 18, 2022

@alekskravchenko

Hey @alvarotrigo, can you please explain how to implement this feature in v4?

alvarotrigo

alvarotrigo commented on Apr 18, 2022

@alvarotrigo
Owner

Sure, just add any content after fullPage.js and that's it :)
You can see a working example on the examples folder:
https://github.com/alvarotrigo/fullPage.js/blob/master/examples/scroll-after-fullpage.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @sidonaldson@rahulmax@markadrake@s10wen@alvarotrigo

        Issue actions

          Normal scrolling after one section · Issue #614 · alvarotrigo/fullPage.js