除非您在该div之外滚动，是否可以仅滚动一个div，而不滚动整个页面？

Question

说我有一个div #scroll，它的大小不够，因此用户需要滚动才能查看其内容。

我为此创建了一个示例。 div为红色，内部包含一些内容。外面也有一些内容。

我正在寻找一种非常特殊的体验：如果您在红色div内滚动，则可以向下滚动到最后一个li节点。但是当您继续滚动时，整个页面将不会移动-除非您滚动到红色div之外。

我希望它可以同时在台式机和移动设备上使用。

有可能吗？

#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>