Fullpage JS插件——window.scroll来管理答案

【问题标题】：FullpageJS plugin - window.scrollTo manageFullpage JS插件——window.scroll来管理
【发布时间】：2023-02-24 19:31:33
【问题描述】：

我正在使用 https://alvarotrigo.com/fullPage/docs/ 插件（jQuery 版本）

我有四个垂直部分并在 html 中一一显示，但在第三部分中有冗长的内容，我必须调整滚动（窗口.scrollTo()) 基于列表项的 offseTop 点击

  Window.scrollTo() is not working so Im trying to do with this solution but I am not getting the accurate calculation , it seems its not a right solution** 
    
     let elem = document.querySelector(".active");
            $('.active-section .fp-scroller').css({'transform': `translate(0, -${elem.offsetTop}px)`});
            $('.active-section .iScrollIndicator').css({'transform': `translate(0, ${ $('.active-section').height() - elem.offsetTop }px)`});

==========================================

<div class="wrapper">
   <section class="section one"> One </section>
   <section class="section two"> two </section>
   <section class="section three"> three - (here there is listing <li> </li>...  )</section>
   <section class="section four"> four </section>
</div>

$('li').click( function(){
    let ind = $('.animate-section.active').index();
    $.fn.fullpage.reBuild();
    $.fn.fullpage.silentMoveTo(ind + 1);

    $('li').removeClass('active');
    $(this).addClass('active');

    let elem = document.querySelector(".active");
    $('.active-section .fp-scroller').css({'transform': `translate(0, -${elem.offsetTop}px)`});
    $('.active-section .iScrollIndicator').css({'transform': `translate(0, ${ $('.active-section').height() - elem.offsetTop }px)`});
 });

$('.wrapper').fullpage({
        sectionSelector: '.section',
        navigation: false,
        normalScrollElements:,
        scrollOverflow: true,
        onLeave: function (origin, destination, direction, trigger) {
            
        },
        afterLoad: function (origin, destination, direction, trigger) {
           
        },
    });

【问题讨论】：

标签： javascript jquery fullpage.js

【解决方案1】：

看起来您使用的是旧版本的 fullPage.js。那会很棘手。

如果您更新到最新的 fullPage.js 版本 4，它会更容易。 window.scrollTo 不起作用，因为它应用于整个窗口，而不是您需要滚动的元素。

如果您使用 fullPage.js v4，您只需执行以下操作：

$('.fp-section.active .fp-overflow')[0].scrollTo()

例如：

$('.fp-section.active .fp-overflow')[0].scrollTo(0, 500)

无需使用transform。您还可以使用 scrollOverflow 对水平幻灯片应用相同的方法。

这是一个工作示例： https://codepen.io/alvarotrigo/pen/LYJRPOW?editors=1010

【讨论】：