如何在浏览器窗口从移动设备调整为平板电脑及以上时启动插件FullPage.js

How to start plugin FullPage.js when browser window is resized from mobile to tablet and up?

本文关键字：平板电脑 启动 js FullPage 插件 调整 浏览器 窗口 移动      更新时间：2023-09-26

使用fullPage.js，当窗口大小低于767px时，我禁用了该插件，代码如下。它是有效的，但当我将其从767px以下调整回960px时，插件就不起作用了。调整大小后，有人能帮助重新启动插件吗？

JS：函数fullPageScroll（）{$（'#main'）.完整页({导航：true})；}

var $win = $(window).width();
if ( $win > 767 ) {
    fullPageScroll();
} else {
    fullPageScroll();
    $.fn.fullpage.destroy('all');
}

因为您还需要将其应用于调整大小事件：

//first call when loading the site
doneResizing()
var resizeId;
//calling the function again  on resize so we can get the new width
$(window).resize(function () {
    //in order to call the functions only when the resize is finished
    clearTimeout(resizeId);
    resizeId = setTimeout(doneResizing, 500);
});
//your original code
function doneResizing() {
    var $win = $(window).width();
    if ($win > 767) {
        fullPageScroll();
    } else {
        fullPageScroll();
        $.fn.fullpage.destroy('all');
    }
}

只需使用此

@media (max-width:767px){
    #scroll-section{
        transform: translate3d(0px, 0px, 0px) !important;
    }
    body {
        overflow: auto !important;
    }
}
相关文章：