Fullpage.js 选项 normalScrollElementTouchThreshold 有什么作用？答案

【问题标题】：What does the Fullpage.js option normalScrollElementTouchThreshold do?Fullpage.js 选项 normalScrollElementTouchThreshold 有什么作用？
【发布时间】：2014-07-21 06:45:48
【问题描述】：

我无法完全理解这个选项以及它是如何工作的，文档提供了解释，但实践中的例子是什么？

来自文档：

normalScrollElementTouchThreshold：（默认 5）定义 html 节点树 Fullpage 向上跳数的阈值测试normalScrollElements 是否匹配以允许滚动触摸设备上 div 的功能。（例如： normalScrollElementTouchThreshold: 3)

【问题讨论】：

标签： javascript jquery fullpage.js

【解决方案1】：

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

对于触控设备，这个实现有点复杂，这就是normalScrollElementTouchThreshold 参与的地方。 touchstart 或 touchmove 事件不会以这种方式传播。

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

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

因此，对于插件来说，要查看它是否是要忽略的元素，它必须在 DOM 结构中检查父元素。默认情况下，它将检查最多 5 个父母。但如果需要，您可以更改它。

为了更好地说明这一点，想象一下这种情况：

<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',
});

如果您在box 元素上触摸您的lightobx，box 元素将返回到插件touchstart 或touchmove 事件。

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

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

【讨论】：