全页.js防止移动设备上的短滚动

Question

网站:http://pizza.tgihost2.com

我使用fullpage.js来显示两个食物菜单。有一个部分有两张幻灯片。每张幻灯片都有自己的食物菜单。整页部分设置为:首先不显示。整个页面部分由用户通过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行开始。第2张幻灯片从152页开始

如何在整个页面内容中实现平滑滚动?

Answer 1

对于内容较大的部分，应该使用fullPage.js选项scrollOverflow:true而不是自己的overflow: scroll;。

请看这个例子。

平滑滚动不会像预期的那样在所有设备/浏览器中工作，除非你使用像isroll .js这样的库，这是fullPage.js在使用scrollOverflow:true时使用的库。