整页.js使用连续滚动或循环时禁用 moveSectionUp

Fullpage.js Disable moveSectionUp when using continuous scroll or looping

本文关键字：循环 moveSectionUp 滚动 js 连续 整页      更新时间：2023-09-26

刚刚开始使用fullPage.js并且到目前为止很喜欢它。
无论如何，当实现连续和循环效果并且您在第一部分时，它允许最终用户向上滚动并降落在最后一部分......这是尝试向用户讲述故事时的问题。因此，我只是尝试禁用向上滚动，但不知道如何这样做。

我做了一些研究，遇到了moveSectionUp并尝试禁用它，但没有弄清楚如何。任何熟悉 fullPage .js的人都可以在这里帮助我吗？

注意：我只希望禁用第一部分，其余部分可以自由来回滚动。

提前谢谢。

使用带有参数up的 fullpage.js 函数setAllowScrolling，如下所示：

//disabling scrolling up
$.fn.fullpage.setAllowScrolling(false, 'up');

你可以在afterRender回调和afterLoad使用它使用它，如下所示：

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    continuousVertical: true,
    afterRender: function () {
        //disabling scrolling up on page load if we are in the 1st section
        if($('.fp-section.active').index('.fp-section') === 0){
            $.fn.fullpage.setAllowScrolling(false, 'up');
        }
    },
    afterLoad: function (anchorLink, index) {
        if (index !== 1) {
            //activating the scrolling up for any other section
            $.fn.fullpage.setAllowScrolling(true, 'up');
        } else {
            //disabling the scrolling up when reaching 1st section
            $.fn.fullpage.setAllowScrolling(false, 'up');
        }
    }
});

在线演示

这样，访问者将无法在页面加载时向上滚动。

从文档中：

setAllowScrolling（布尔值，[方向]）

添加或删除滚动各节的可能性，方法是使用 鼠标滚轮/触控板或触摸手势（由 默认值）。

方向：（可选参数）允许值：全部、上、下、左、 右或它们的组合用逗号分隔，如向下、向右。 它定义了启用滚动的方向或 禁用。

相关文章：