CoderScissorhands CoderScissorhands - 1 year ago 76
Javascript Question

autoScrolling with keyboard - but only only for some sections - when using fullpage.js

I am using the beta of fullpage.js (v 2.7.9) which can be found here, and which features a new setting called

. When this setting is set to
, by default, the user can gesture, via trackpad, to autoScroll/jump through a section. However, if the function detects that a section has the class
, the function setting
hybrid: true
will turn off autoScrolling. Thus, when this class is present, and hybrid is 'true', scrolling behavior becomes slow and incremental, moving through a section, rather than jumping between sections. So with this new setting, you can either jump to the next section or scroll slowly through it, just by adding a class - pretty cool!

Here is a jsfiddle, written by the fullpage.js author which demonstrates this great hybrid behavior. If you use your trackpad to scroll when viewing the first section, it jumps, but if you use trackpad scrolling on all subsequent sections, the scrolling is slow and incremental (because the "fp-normal-scrolling" class has been added to each of them).

Here is the same html from the jsfiddle:

<div id="fullpage">
<div class="section">One</div>
<div class="section fp-normal-scroll">
<div class="slide">Two 2</div>
<div class="section fp-normal-scroll">Three</div>
<div class="section fp-normal-scroll">Four</div>

Here is the javascript with hybrid on:
(you have to add the fullpage js and css files for this to work)

sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
fitToSection: false

My problem: I would like to be able to have the down arrow on the keyboard have this same kind of awesome mixed/hybrid behavior, but I can't figure out how to do it. So to say it plainly, on some sections I would like the down-arrow-key to cause section jumps, and on other sections I would like the down-arrow-key to allow the user to incrementally/slowly scroll through sections, without skipping. However, as far as I can tell this hybrid behavior is not yet available for the keyboard. I can identify two relevant settings.

The first is autoScrolling. I could turn off autoScrolling, and I would be able to have incremental scrolling on the final pages (which is desirable), but then if it is off, I lose the ability to use the keyboard to jump from the first section to the second. Not good. :(

The other potentially useful setting that I can identify is setKeyboardScrolling. This seems to enable the user to either use the keyboard to navigate or not.

Although I have had an exchange with the developer (you can read our conversation here) I still cannot figure out a combination of settings that will allow me to:

  1. Always have the keyboard on

  2. Have the keyboard produce section jumps on some sections

  3. Have the keyboard produce slow/incremental scrolling on other sections.

Fullpage.js may not offer this yet, but I am optimistic. Because this type of hybrid behavior already is included in the beta for gesture scrolling, someone with enough javascript/jquery knowledge might be able to come up with a fix that allows down-arrow-presses to have this same hybrid capability. Perhaps code from the gesture control part of fullpage.js can be rewritten to apply to the the keyboard controls/down-arrow key?

I would attempt it myself, but I'm not skilled enough in javascript. Can any of you come up with a fix? I don't care if the solution involves a set of fullpage.js settings or a tweak to fullpage.js. I'd be happy with any solution.


UPDATE: I got a response from the developer about how to achieve this, but I don't understand. Can someone perhaps show me what he means. This is what he wrote:

Just use a callback for it and set it off for any other section rather
than the 1st one by using setKeyboardScrolling.

Answer Source

As I said, use the callback and call the fullpage.js method setKeyboardScrolling with your own logic, in this case, we will set it to true only if index == 1. (namely, when we are on the 1st section)

    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    fitToSection: false,
    afterLoad: function(anchorLink, index){
        $.fn.fullpage.setKeyboardScrolling(index === 1);

Working demo