Question

在包含一个部分和多张幻灯片的页面上使用fullpage.js，我无法向上/向下滑动触摸设备上任何幻灯片的内容。如果我将幻灯片内容包含在<div style="overflow-y:auto;height:100%;">content</div>内，在我的触摸屏上启用笔记本电脑会出现滚动条，我可以用鼠标滚动它但不能用我的手指滚动它。在我的iphone和ipad上，没有滚动条出现，也无法滚动。同样的事情在我的三星奔跑androïd...

请参阅此处的示例：http://jsfiddle.net/sebmeric/nn11xxay/1/

有没有人有任何想法？

谢谢

SEB。

Answer 1

以下是一些可能有助于您在触摸屏设备中滚动的链接。

<强> Link 1 Link 2 Link 3

这是您可能需要在css中添加的内容

 -webkit-overflow-scrolling: touch;

您可以针对不同的浏览器对上述内容进行更多研究

Answer 2

那是因为你在fullPage.js中使用了一个可滚动的元素。该插件仅从一个部分滚动到另一个部分，因此如果您希望它知道您在一个部分中有一个可滚动元素，您应该让它知道。

您应该使用fullPage.js选项normalScrollElements。

$('#fullpage').fullpage({
    sectionsColor : ['#ccc', '#456'],
    normalScrollElements: '.slide-content'
});

来自the docs：

normalScrollElements：（默认为null）如果要在滚动某些元素时避免自动滚动，则需要使用此选项。（对于地图，滚动div等有用）它需要一个带有jQuery选择器的字符串用于这些元素。（例如：normalScrollElements：＆＃39;＃element1，.element2＆＃39;）

甚至可能normalScrollElementTouchThreshold

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

无法向下滚动幻灯片内容

2 个答案: