Solved

Fullpage.js not scrolling to full height of the content

Posted on 2014-07-31
2
2,439 Views
Last Modified: 2014-08-01
I've implemented the fullpage.js plugin but I'm having an issue when the section of the content is too long for the page.  As you can see from the following link:

http://ymorin007.webfactional.com/events/UFC174/ and going to the section Leaders from any device or desktop.

You will notice that the scroll bar ends before it has reach all the table content.

So how do I fix this issue so the scrollbar will see the full table content.

my fullpage() declaration:

$('#container-event-page').fullpage({
        verticalCentered: false,
        loopHorizontal: false,
        scrollOverflow: true,
        css3: true
    });

Open in new window

0
Comment
Question by:ymorin007
2 Comments
 
LVL 5

Accepted Solution

by:
Dobromir Yordanov earned 500 total points
Comment Utility
I'm not sure how much this helps you but the plugin seems to be getting confused by the top padding on your body tag. Remove padding-top on body and observe the behavior. It's covered by the header (expected) but scrolling works just fine. I think what you're using was made to be a plugin that takes the full width and height of the page (thus the name fullpage.js). I'm not sure if adding a fixed header to it would be as easy as what you've done.

My best suggestion is to try to remove the padding from the body and instead add it to the actual element that you are scrolling. Also, your header wouldn't need to be fixed when using this plugin since it doesn't use native browser scrolling which makes fixed and absolute the same thing :) But that's up to you, I don't see it helping or hurting either way.

Good Luck!
Dobri
0
 

Author Comment

by:ymorin007
Comment Utility
Thanks Dobri for the help.

You are right the top padding was the issue so I removed it and applied it to the paddingTop option from the fullpage() function and it works perfectly now.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now