Fullpage.js和移动设备:如果必须启用内容溢出，如何启用区段/幻灯片开关？
在试验了一些选项之后，我仍然没有得到令人满意的结果：
使用的Javascript库是FullpageJS (http://alvarotrigo.com/fullPage/)
Fullpage.js由以下设置初始化：
$('#fullpage').fullpage({
sectionsColor: colors,
anchors: anchors,
scrollOverflow: true,
afterSlideLoad: function() {
startTheSliders();
},
onLeave: function(index) {
setTimeout(function() {
$.fn.fullpage.scrollSlider(index,0);
},1000);
}
});重要事项:根据文档scrollOverflow:true被设置(并且必须设置为true)，因为特别是在移动设备上，幻灯片的内容有时高于屏幕高度。
但是，绝对要求用户可以用手指(而不是导航)在幻灯片之间进行水平和垂直切换。打算采取的行为如下：
- 如果手指向左或向右移动，则水平开关开关滑动。
- 垂直切换幻灯片:下一次底部幻灯片，只有当幻灯片被滚动到底部和手指向下移动。下一个顶部幻灯片:只有当幻灯片被滚动到顶部，手指向上移动。
可以在这里找到(前) dev项目：http://www.studiodankl.com/
回答 2
Stack Overflow用户
发布于 2015-11-01 23:19:49
这个问题实际上与fullpage.js本身无关--它实际上是一个无效的插件修改。
然而，正如其他一些人所经历的那样:检查任何额外的HTML、CSS和，特别是JavaScript，因为这最有可能导致问题。
Stack Overflow用户
发布于 2015-10-23 11:09:44
我不建议您在移动设备上使用scrollOverflow。
如果你想要一个真正的响应网站，你应该调整内容到设备，而不是使用“黑客”滚动条来适应内容。
您可以使用在移动设备上内容会溢出的部分中的类fp-auto-height。您应该添加它时，您的网站得到响应，这是，在一定的宽度或高度限制。
这样，这些部分将能够比设备视图更大。
将其与responsiveHeight或responsiveWidtdh选项fullpage.js (设置autoScrolling:false)相结合，您将能够在小屏幕设备上拥有一个响应能力很强的站点。
例如，您可以使用一个小的视口来查看本网站使用fullpage.js。它没有使用fp-auto-height选项，但结果完全相同。
在这种情况下，我们使用的站点是：
/*screen resolutions smaller than 950px height*/
@media (max-width: 950px){
#section3.fp-section,
#section3 .fp-tableCell{
height: auto !important;
min-height: 100%;
}
}，这与fullpage.js对fp-auto-heigh的使用非常相似。
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
height: auto !important;
}更新
fullpage.js现在也为此目的提供了类fp-auto-height-responsive。更多的在医生里。
https://stackoverflow.com/questions/33288286
复制相似问题
腾讯云开发者
