Fullpage.js and infinite scroll

[FrancoisSoler]

Hello,

I'm trying to set up FullpageJs in my React app with infinite scroll. It's main purpose is to display an infinite flow of posts from WordPress I'm using a framework to do the infinite scroll. It works by fetching the next posts to display once the scroll bar is close enough from the bottom, and then add the next post in the DOM, under the first post inside the parent div. So my question is how should I proceed to make FullpageJs works with my infinite scroll that adds a new div to the DOM on scroll ?

here is my post-list components

` <Box className="boxWrapper"">

  <ReactFullpage
    //fullpage options
    licenseKey='my-license-key'
    scrollOverflow={true}
    verticalCentered={true}
    render={({ state, fullpage_api }) => {
      return (

        <ReactFullpage.Wrapper >
         // loop for the infinite scroll
          {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 >

); };`

each section is a post loaded with infinite scroll

thanks for reading

[alvarotrigo]

What's exactly the problem? Can you replicate it on a codesandbox?

[FrancoisSoler]

The probem is that i can't get Fullpagejs to work with my infinite scroll. I don't know how to make Fullpage allow to scroll enough to load the next post and if somehow it manages to load the next post how to make Fullpage know that a new section has been generated.

I've tried to upload the repo into codesandbox but it gives me an unknow error and won't load. It's a private repo that i can't share for now, but I can send you the link for it if that helps

[FrancoisSoler]

Right now with the code above Fullpage load the first post and allow me to scroll down to end of post and if i grab with my mouse the end of page it load the next post with animation, display the next post for a second and flicker back to first post. Also I can't get the third and next posts, I can only load the first two posts

[alvarotrigo]

make Fullpage know that a new section has been generated.

You don't have to. The latest version of the react-fullpage component (version 0.1.27) will detect new sections/slides automatically and update accordingly.

I don't know how to make Fullpage allow to scroll enough to load the next post a

You'll have to use scrollBar:false and fitToSection:false to be able to detect the scrolled position on the page.

[FrancoisSoler]

The latest version of the react-fullpage component (version 0.1.27) will detect new sections/slides automatically and update accordingly.

that's my point, and my bad I forgot to tell you that since I have to use webpack4 (because of a framework that I use in this project) i can't use the last version and I'm stuck with 0.1.19 of fullpage. Soon i might be able to upgrade webpack but not now. So do I have to use rebuild() each time the infinite scroll fetch and put in the DOM a new post ? If so, how would you do it ?

Thanks I will try that

[alvarotrigo]

So do I have to use rebuild() each time the infinite scroll fetch and put in the DOM a new post ? If so, how would you do it ?

I don't think so. Check the example folder and see how it works there.

I'll close the issue as this is beyond the scope of the kind of support we provide here.