当屏幕大小等于或小于 480 时，在 FullPage.js 上添加选项

问题描述

我正在为我正在构建的网站使用 fullpage.js，当屏幕大小等于或小于 480 时，我想在特定部分添加一个普通滚动选项。这是我当前的代码。

new fullpage('#fullpage',{
    autoscrolling: true,anchors: ['hero','news','@R_593_4045@ion','activity','pictures','contact','oceanShiga','p-footer'
    ],css3: true,scrollingSpeed: 1000,fitToSection: true,dragAndMove: true,afterRender:()=>{
        if(window.innerWidth <= 480 ){
            scrollbar:true
        }
        $(window).width() > 480){ 
            $('#fullpage').fullpage(
                normalScrollElements:['hero','news'],)
            };
    },

解决方法

问题已在 fullpage.js isssues forum 上得到解答：

我建议您只收听调整大小事件。当视口的宽度小于 480 像素时，您可以为这些元素添加一个类，例如 .normalScroll。当它变大时，您可以将其移除。

为此，您可以使用 fullpage.js 提供的 afterResize 事件。

然后你可以在 fullpage.js 初始化时使用这个选项。

new fullpage('#fullpage',{
    normalScrollElements: '.normalScroll',afterResize: function(width,height) {
        var normalScrollSelectors = ['.hero','.news'];
        console.log(width)
        normalScrollSelectors.forEach(function(selector) {
            if (width < 440) {
                document.querySelector(selector).classList.add('normalScroll');
            } else {
                document.querySelector(selector).classList.remove('normalScroll');
            }
        });
    }
})

<div id="fullpage">
    <div class="section">
        Section 1
        <div class="news">
           Testing...
        </div>
    </div>
    <div class="section">Section 2
        <div class="hero">
           Testing...
        </div>
    </div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
    
</div>

fullpage.js javascript