Can't scroll outside the ReactFullPage.Wrapper on Next.js

[mjenkins-fcb]

Description

I am working with Next.js and trying to use React Fullpage on the homepage. Everything is set up and working however if I add content outside of the wrapper I am unable to scroll to it. If I grab the scrollbar and pull it down I can see the content, but it just gets snapped back up to the last panel in the wrapper.

Link to isolated reproduction with no external CSS / JS

edit reproduction here:
https://stackblitz.com/edit/nextjs-gwceuj?file=pages%2Findex.js

I wasn't sure how to set up a codesandbox for Next.js, but started a fresh Next.js project and added this to page.tsx:

"use client";
import ReactFullpage from "@fullpage/react-fullpage";

export default function Home() {
  return (
    <>
      <ReactFullpage
        credits={{ enabled: true }}
        scrollBar
        render={() => {
          return (
            <ReactFullpage.Wrapper>
              <div className="section">
                <p>hi</p>
              </div>
              <div className="section">
                <p>hi</p>
              </div>
              <div className="section">
                <p>hi</p>
              </div>
              <div className="section">
                <p>hi</p>
              </div>
            </ReactFullpage.Wrapper>
          );
        }}
      />
      <div style={{ height: "1800px" }}>OUTSIDE</div>
    </>
  );
}

Steps to reproduce it

1. Setup Next.js app.
2. Replace code in /src/app/page.tsx with the above
3. Load the app.
4. Try and scroll down the page past the bottom 'section'

[alvarotrigo]

The scroll beyond fullpage.js is not a fully working feature yet.
I'd recommend you to place that content inside the fullPage.js wrapper and use "scrollOverflow". This way you'll be able to scroll normally within the last section.

Otherwise, try removing these styles from yourreact-root wrapper.

style={{ height: '100%', position: 'relative' }} 

[mjenkins-fcb]

I had tried that with not much luck, I had it working in a pure React environment, but not when I use the same code in Next.js.

React version here:
https://codesandbox.io/s/nice-shadow-frxxkf?file=/src/App.js:98-172

Ideally I'd like the content outside of the fullPage.js wrapper as it is the footer and would like to keep it in the layout rather than the page so it can be used across all pages as opposed to having to render a new version for each page navigation.

[alvarotrigo]

It doesn't work in react using 0.1.40.
Probably a bug fix :)

As I said, the feature of scrolling beyond fullPage.js is not polished or ready to use.

[mjenkins-fcb]

Ah I see - didn't spot the version differences. Thanks for flagging.