Question

有问题的网站：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

上滑动两个开始

如何在整页内容中实现平滑滚动？

Answer 1

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

见this example。

平滑滚动在所有设备/浏览器中都无法正常工作，除非您使用像iScroll.js这样的库，这是fullPage.js在使用scrollOverflow:true时使用的。

整页.js防止在移动设备上短滚动

1 个答案: