Skip to content

Normal scrolling after one section #614

Closed
@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.

43 remaining items

Loading
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