I have 2 projects, the "main" one is in SquareSpace and I am rendering another React project inside as an iframe.

My issue is when I am scrolling in the iframe and reaching the bottom of the iframe I cannot keep scrolling on the page and reach the footer of the "main" project.

This issue appears on mobile, what is the best way to tackle this issue?

Thank you!

Header of SquareSpace
  <div style="position: relative; width: 100%; height: 100vh; margin-bottom: 80px;">
    <iframe id="custom-iframe" 
            src="myReactApp" 
            width="100%" 
            height="100%"
            style="border: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; scrolling: no;">
    </iframe>
  </div>
 Footer of SquareSpace