Is it possible to scroll only a div, but not the whole page unless you scroll outside that div?

Question

Say I have a div #scroll and it's not big enough so the user needs to scroll to see its content.

And I have created an example for this. The div is in red, and it has some content inside. There is also some content outside.

I am looking for a very special experience: if you scroll inside the red div, it can go down to the last li node. But when you keep scrolling, the whole page won't move - unless you scroll outside the red div.

And I hope to make it available for both desktop and mobile.

Is it even possible?

#scroll {
  background:red;
  height:200px;
  overflow-y:scroll
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="scroll">
  <ol>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
    <li>random</li>
  </ol>
</div>

<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>some other content</p>
<p>I don't want to be found if you scroll in the div#scroll</p>