CODEWITHSUNDEEP
javascriptjqueryhtmlfullpage.js
WilliamAlexander
WilliamAlexander

Reputation: 384

How can I get fullpage.js to allow my pages to scroll vertically too?

I'm building a website for a client who wants a horizontally scrolling site, that also accommodates vertical scrolling per "page" when the content won't fit. I did not know how to do this without help, so I started with Álvaro Trigo's Full Page js which you can see here:

http://www.alvarotrigo.com/fullPage/

And I hacked around until I got this:

http://www.valleycharacter.org/

This is working relatively well so far, except for one thing:

If the browser window is wide, but not very tall, so that the content is deeper than the height of the browser window will allow, there is no scrolling ability for the site. I've tried many different ways of enabling scrolling, but they either don't work at all, or they work for one page but not others, or only after re-sizing the window slightly to somehow "wake up" the scroll bar.

Is this even possible? I'm thinking that there might be some combination of the methods used in fullpage that create a situation where vertical scrolling isn't an option? I'm stuck.

Upvotes: 1

Views: 845

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29735

You just need to debug the page to see that there is an error:

Uncaught TypeError: element.find(...).slimScroll is not a function

That could mean many things, but taking into account that you are using a jQuery plug-in, most likely it will be one of these two:

  • You are using an old version of the plug-in.
  • You forgot to include one library needed for the plug-in to work.

As you copied the code from Álvaro Trigo's example page (you should update the meta tag so your page description is accurate and it doesn't look like the page is owned/developed by another person), go there, and check the source code.

There you can see that he is actually including a library that you are not:

<script type="text/javascript" src="../vendors/jquery.slimscroll.min.js"></script>

Download that file, include it in your project, and then the error is gone, the page fits better within the screen, and the scrolling works fine now.

Upvotes: 4

Related Questions