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

Question

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

new fullpage('#fullpage', {
    autoscrolling: true,
    anchors: ['hero', 'news', 'information', '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'],
            )
            };
    },

Answer 1

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

我建议您只听调整大小事件。当视口宽度小于 480px 时，您可以向这些元素添加 class，例如 .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>

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

Add option on FullPage.js when screen size is equal to 480 and below

javascript

fullpage.js