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

Question

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

来自docs：

  

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

Answer 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，最后检查{{1这将导致插件忽略对该元素的自动滚动。