Solved

Fullpage.js not scrolling to full height of the content

Posted on 2014-07-31
2
2,550 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
ID: 40233418
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
ID: 40233890
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

770 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