Hello,
Lately i’ve been trying to use Fullpage.js in my Frontity project to display posts in a tiktok way. First of all since Frontity only works with webpack 4 i can’t use the last version of FullpageJs, if that helps.Making fullpage scroll whith hardcoded div is easy, but I struggle to do it with infinite scroll.
My infinite scroll works fine without FullpageJs but with it it kinda works , I can scroll down once with animation, next posts displays for 1 second and it then flicker back to first post . Also it loops between the first 2 posts of the list not the entire post list. So my question is how would you do to use both of these features ? I can’t create a sandbx unfortunately but here is my post-list component;
thanks
<Box className="boxWrapper"">
<ReactFullpage
//fullpage options
licenseKey='my-license-key'
scrollOverflow={true}
verticalCentered={true}
render={({ state, fullpage_api }) => {
return (
<ReactFullpage.Wrapper >
{posts.map(({ key, link, isLast, Wrapper, i }) => (
<Wrapper key={key} className="section fp-auto-height" >
<Box >
<Post
post={post}
postData={postData}
link={link}
catId={catId}
posts={posts}
isLast={isLast}
key={key}
/>
<PostPrevInfinite
bgColorArticle={bgColorArticle}
nextImgArray={nextImgArray}
// display={isLast ? "none" : "flex"}
className="PostPrevInfinite"
isSponso={isSponso}
/>
{!isLast && <hr />}
</Box>
</Wrapper>
))}
</ReactFullpage.Wrapper>
);
}}
/>
< Container
css={css`
background: ${bgColorArticle};
`}
>
{isFetching && <Loading />}
{
(isLimit || isError) && (
<Button
onClick={fetchNext}
css={css`
background: ${colorsHover};
transition: all 0.3s ease-in-out;
&:hover {
transform: scale(0.9);
}
`}
>
{isError ? "Essayer à nouveau" : "Charger plus"}
</Button>
)
}
</Container >
</Box >
);
};