问题描述
我不能完全理解这个选项以及它是如何工作的,该文件提供了一个解释,但实际上这是一个例子吗?
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?
推荐答案
选项 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有什么作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!