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

时间:2016-11-04 21:43:22

标签: iphone mobile scroll fullpage.js

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

上滑动两个开始

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

1 个答案:

答案 0 :(得分:0)

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

this example

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