有问题的网站:http://pizza.tgihost2.com
我正在使用fullpage.js来显示两个食物菜单。有一个部分有两张幻灯片。每张幻灯片都有自己的食物菜单。 fullpage部分设置为display:none。用户通过jquery发布整页部分:
$('#launchPizzaMenu, .launch-menu').click(function() {
$('body').addClass('noscroll');
$.fn.fullpage.silentMoveTo('menu', 0);
$('#fullpage').slideDown(200);
});
问题是在查看整页内容时手机上的滚动行为。页面的其余部分并不流畅和流畅。当我滚动/轻弹时,我希望它在我从屏幕上松开手指后继续滚动一下,但滚动会立即停止并且在滚动整页内容时感到费力。
这是我的全页配置:
$('#fullpage').fullpage({
anchors: ['menu'],
controlArrows: false,
autoScrolling: false,
responsiveWidth: 900,
afterResponsive: function(isResponsive){
}
});
以下是显示全页标记的要点:https://gist.github.com/anonymous/0f8c33a2a875040edb7d5503238f8f71
有一个部分有两张幻灯片。 从第21行开始滑动一个。 在152
上滑动两个开始如何在整页内容中实现平滑滚动?
答案 0 :(得分:0)
对于内容较大的部分,您应该使用fullPage.js选项scrollOverflow:true
而不是自己的overflow: scroll;
。
平滑滚动在所有设备/浏览器中都无法正常工作,除非您使用像iScroll.js这样的库,这是fullPage.js在使用scrollOverflow:true
时使用的。