我正在使用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) {
},
});
1条答案
按热度按时间mm9b1k5b1#
看起来您使用的是旧版本的fullPage.js。这将是棘手的。
如果你更新到最新的fullPage.js版本4,它会更容易。window. scrollTo不会工作,因为它被应用到整个窗口,而不是你需要滚动的元素。
如果您使用fullPage.js v4,您只需要执行以下操作:
例如:
不需要使用
transform
。您也可以使用scrollOverflow对水平幻灯片应用相同的设置。下面是一个工作示例:https://codepen.io/alvarotrigo/pen/LYJRPOW?editors=1010