在div中无缝滚动div

Question

我有一个看似独特的要求。我的网站是一个长的垂直页面，分成相同大小的div（我叫'屏幕'），它完全符合用户的屏幕尺寸。

当你向下滚动页面时，其中一个屏幕包含一个比屏幕尺寸高的div，所以我想在你到达所述屏幕就位的点时滚动这个内部div。当您滚动到此内部div的底部时，页面其余部分的滚动需要继续，同时下一个屏幕在下方略微可见，以便用户可以选择跳到它。

我尝试过使用基本的CSS（overflow-y等），但是有一些问题。如果您只是使用鼠标中键滚轮或滚动条向下滚动，它就会直接通过屏幕，正如您所期望的那样。我需要几乎'劫持'滚动事件，当向下滚动页面时，将滚动转移到内部div而不是窗口。

使用CSS的第二个也是更容易解决的问题是双滚动条。

示例HTML：

<div id="Content">

    <div id="Screen1" class="Screen">
        Just the opening screen
    </div>

    <div id="Screen2" class="Screen">
        <div>
            LONG CONTENT GOES HERE - ie, longer than the screen
            I need to scroll this instead of scrolling to the next screen
        </div>
        <a href="#" class="Tab">JUMP TO NEXT SCREEN</a>
    </div>

    <div id="Screen3" class="Screen">
        <a href="#" class="Tab">JUMP TO NEXT SCREEN</a>
    </div>
</div>

我希望我已经解释了我的要求，但如果您需要更多信息，请告诉我。