Making a div unscrollable relative to parent, but scrollable relative to viewport?

Making a div unscrollable relative to parent, but scrollable relative to viewport?

Is there some JQuery of javascript function that simply makes a div unscrollable to its parent div, but scrollable relative to viewport?

  1. #pagecontainer>div {
  2.     margin-left:50px;
  3.     margin-top:50px;
  4. }
  1. <div id="pagecontainer">

    <div id="page1">

        <div class="unscrollable"> <!--UNSCROLLABLE-->
            <a href="#page1" class="link">Link 1</a>
            <p>
            <a href="#page2" class="link">Link 2</a>
            <p>
            <a href="#page3" class="link">Link 3</a>
            <p>
            <a href="#page4" class="link">Link 4</a>
            <p>
        </div>

        <div class="scrollable"> <!--SCROLLABLE-->
            content content content
        </div>

    </div>

   <div id="page2">

        <div class="unscrollable"> <!--UNSCROLLABLE-->
            <a href="#page1" class="link">Link 1</a>
            <p>
            <a href="#page2" class="link">Link 2</a>
            <p>
            <a href="#page3" class="link">Link 3</a>
            <p>
            <a href="#page4" class="link">Link 4</a>
            <p>
        </div>

        <div class="scrollable"> <!--SCROLLABLE-->
            content content content
        </div>

    </div>

</div>

Unscrollable content has to be inside the parent div #pageX, with multiple #pageX pages inside parent #pagecontainer.

I've tried like everything css-wise, in terms of setting pagecontainer/page#/unscrollable/scrollable to relative/absolute. Nothing works. It also won't work if I set .scrollable to overflow:auto instead of #pagecontainer to overflow:auto, because then I'll get this nasty 50px gap in the scrollbar with top of the pagecontainer, as #pageX has a margin of 50px and it's now scrolling relative to #pageX instead of #pagecontainer.