4

I am trying to use the script Scrollify (https://github.com/lukehaas/Scrollify) but I have sections that are longer than the user's screen, which means you first have to scroll down to see that contents' content.

Scrollify, however, doesn't let this happen and will just immediately scroll to the new section.

Is there a way to modify Scrollify and/or use another script that will accomplice what I would like it to do?

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Kairowa
  • 1,111
  • 1
  • 10
  • 16

2 Answers2

1

Scrollify has recently received a number of updates that resolve the issues you've been having.

Scrollify now has additional options, methods and callbacks and it now works great with trackpads, Apple Magic mice and kinetic scrolling.

Luke Haas
  • 672
  • 2
  • 6
  • 16
-1

You can easily achieve that by using fullPage.js instead. If you want to keep the scroll bar as in scrollify, just use the option scrollBar:true for that as in this example.

Using the option scrollOverflow:true you can overcome your problem as you can see in this example.

From fullPage.js documentation:

scrollOverflow: (default false) defines whether or not to create a scroll for the section in case its content is bigger than the height of it. When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the afterRender callback. In case of setting it to true, it requires the vendor plugin jquery.slimscroll.min and it should be loaded before the fullPage.js plugin.

Additionally, fullPage.js:

  • Provides much more options, methods and callbacks.
  • when possible, it uses css3 transformation which perform better in tablets and mobile phones.
  • Solves problems with Apple laptops trackpads, Apple magic mouses and any kinetic scrolling.
  • Provides a set of extensions
Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • @Erman that's because you are doing something wrong :) Take [any example](https://github.com/alvarotrigo/fullPage.js/tree/master/examples) as a base document and start from it. – Alvaro Feb 22 '15 at 13:39
  • 1
    @Erman FullPage.js wraps each section into `div` tags, and applies quite some CSS magic. My impression after looking at the HTML/CSS on Scrollify's demo & the javascript code itself: Scrollify seems much simpler. I will try it tomorrow & get back to you. – Adriano Mar 04 '16 at 13:57
  • It doesn't wrap anything unless you use `verticalCentered:true` or `overflowScroll:true`. – Alvaro Oct 06 '16 at 08:35