javascript - Fullpage.js 选项 normalScrollElementTouchThreshold 有什么作用？

Question

我不太了解这个选项及其工作原理，该文档提供了解释，但实践中的示例是什么？

来自文档:

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

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

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

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

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

因此，对于插件来说，要判断它是否是要忽略的元素，就触摸它而言，它必须在 DOM 结构中向上检查父元素。默认情况下，它会检查最多 5 个 parent 。但您可以根据需要更改它。

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

<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 与 不同框元素。

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