jquery FullpageJS插件-窗口.滚动管理

5us2dqdw  于 2023-03-01  发布在  jQuery
关注(0)|答案(1)|浏览(102)

我正在使用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) {
           
        },
    });
mm9b1k5b

mm9b1k5b1#

看起来您使用的是旧版本的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

相关问题