scrolling stops reacting once I scroll to a sticky footer with a lower z-index

Question

I created a footer that sticks to the bottom of the screen and sits behind the page content so as the user scrolls you can see it revealed as they reach the bottom. I had to use a div as a spacer so the footer will be revealed. Everything works however I noticed once it gets to the bottom, the scroll wheel doesn't scroll it back up and on touch devices nothing happens. On smart watches in particular the footer height is 100vh so once it goes that far you're just stuck. Here's a simplified version of what I'm doing.

*{ padding: 0; margin: 0; }

.dummyFrame{ display:block; height: 6100px; background-color: blue; position: relative; }

.viewFrame{
    display: block;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: scroll;
    overflow-x: hidden;
}

.routerShellB{
    display: block;
    position:relative;
    overflow: hidden;
    z-index: 2;
}

footer{
    display: block;
    width: 97%;
    height: 330px;
    background-color: orange;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
 }

.footerGapB{
  background: none;
  visibility: hidden;
  pointer-events: none;
  opacity:0;
  height:310px;
  width:100%;
  position: relative;
  z-index: -11;
}

.footerShell{
  display: grid;
  align-items: center;
  justify-items: center;
  height: 100%;
  width: 100%;
}

.link{
  display: grid;
  align-items: center;
  justify-items: center;
  width: 130px;
  height: 85px;
  background-color: red;
}

<section class="viewFrame">
  
  <article id="top" class="routerShellB">
    <div class="dummyFrame"></div>
  </article>
  
  <div class="footerGapB"></div>
  
  <footer>
    
    <div class="footerShell">
      <a href="#top" class="link">DemoLink</a>
    </div>
  
  </footer>


</section>

Now I've noticed from playing with the z-index of the items that once I put the footer to a negative value I'll be able to scroll as desired, however I won't have access to the link and if I apply pointer-events: none; to anything other than the spacer div that will eliminate the user's ability to interact with anything. I've seen this type of footer on random sites which is where I got the idea, how can I set this up to be accessible to the user without eliminating the scrolling?

UPDATE

I just realized I forgot to add the styling for the footer in my code. If you scroll all the way down, click on the orange, and try to scroll up with the mouse wheel, it won't work, you need to go back to the scroll bar in order to start scrolling again.