Fullpage.js选项normalScrollElementTouchThreshold有什么作用？ [英] What does the Fullpage.js option normalScrollElementTouchThreshold do?

问题描述

我不能完全理解这个选项以及它是如何工作的，该文件提供了一个解释，但实际上这是一个例子吗？

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?

normalScrollElementTouchThreshold :(默认值为5）定义跳数为
的阈值html节点树Fullpage将
测试以查看 normalScrollElements 是否允许在触摸设备上滚动
功能。 （例如：
normalScrollElementTouchThreshold：3 ）

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)

推荐答案

选项 normalScrollElements 在桌面浏览器上非常容易，因为 mouseover 元素会向下传播通过DOM结构。

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

对于触摸设备，这种实现有点复杂，而且 normalScrollElementTouchThreshold 参与其中。 touchstart 或 touchmove 事件不会以这种方式传播。

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.

当识别出触摸事件时，将返回手指下方DOM结构中最深的元素。

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

这意味着如果你有一个例如，您网站上的灯箱弹出插件，您希望它使用选项 normalScrollElements ，然后如果您有 divs 或其中的paragrphas，将返回这些元素而不是您应用 normalScrollElements 的灯箱容器。

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.

因此，对于插件来说，在触摸它时它是否是要忽略的元素，它必须在DOM结构中检查父元素。
默认情况下，它最多可检查5个父母。但是你可以根据需要改变它。

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>

初始化：

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

如果你在框上触摸你的lightobx 元素，框元素将返回到插件 touchstart 或 touchmove events。

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

您已将 normalScrollElements 设置为 myLightBox ，它会向上或向下滚动该部分，因为 myLightBox 与框元素不同。

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

为了解决这个问题，插件在DOM结构中上升了5个级别，将它们与 normalScrollElements 中的值进行比较，所以它会检查框，然后是 body ，最后是 myLightBox ，其中将导致插件忽略对该元素的自动滚动。

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.

这篇关于Fullpage.js选项normalScrollElementTouchThreshold有什么作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！