What does the Fullpage.js option normalScrollElementTouchThreshold do?

Question

I can't quite get my head around this option and how it works, the document provides an explanation but what is an example of this in practice?

From docs:

normalScrollElementTouchThreshold : (default 5) Defines the threshold for the number of hops up the html node tree Fullpage will test to see if normalScrollElements is a match to allow scrolling functionality on divs on a touch device. (For example: normalScrollElementTouchThreshold: 3)

Answer 1

The option normalScrollElements works quite easily on desktop browsers as the mouseover element gets propagated down through the DOM structure.

For touch devices, this implementation is a bit more complex and that's where the normalScrollElementTouchThreshold takes part. The touchstart or touchmove event doesn't get propagated in that way.

When a touch event is recognized, the deepest element in the DOM structure which is under your finger will be returned.

This means that if you have a lightbox popup plugin on your site, for example, and you want it to work with the option normalScrollElements, then if you have divs or paragrphas inside it, those elements will be returned instead of your lightbox container to which you are applying the normalScrollElements.

Therefore, for the plugin to see if it is element to ignore or not in terms of touching over it, it has to go up in the DOM structure to check the parent elements. By default, it will check up to 5 parents. But you can change it if needed.

To illustrate it a bit better, imagine this situation:

<div class="section">
    <div class="myLightBox">
        <div class="title">My Title</div>

        <div class="body">
            <div class="box" style="height:400px; display:block">Box1</div>
            <div class="box" style="height:400px; display:block">Box1</div>
        </div>
    </div>
</div>

Initialization:

$('#fullpage').fullpage({
    normalScrollElements: '.myLightBox',
});

If you touch your lightobx over the box elements, the box element will be returned to the plugin touchstart or touchmove events.

As you have set the normalScrollElements to myLightBox, it would scroll the section up or down as myLightBox is different than the box element.

To solve this problem the plugin goes up 5 levels in the DOM structure comparing them with your values in normalScrollElements, so it would check box, then body and finally myLightBox, which will cause the plugin to ignore the automatic scrolling over that element.