始终滚动div元素而不是页面本身

Question

我有一个内部<div id="content">元素的页面布局,其中包含页面上的重要内容.设计的重要部分是:

#content {
  height: 300px;
  width: 500px;
  overflow: scroll;
}

现在当包含文本大于300px时,我需要能够滚动它.是否可以滚动<div>,即使鼠标没有悬停元素(箭头键也应该工作)？

请注意,我不想禁用"全局"滚动:页面上应该有两个滚动条,全局滚动条和滚动条<div>.

唯一改变的是内部<div>应该总是滚动,除非它不能再移动(在这种情况下页面应该开始滚动).

这可能以某种方式实现吗？

编辑

我认为问题有点令人困惑,所以我会附加一系列我希望它能够工作的方法.(Khez已经提供了概念验证.)

第一个图像是打开时页面的外观.

现在,鼠标位于指示的位置并滚动,应该发生的是

• 首先内部div滚动其内容(图2)
• 内部div已完成滚动(图3)
• body元素滚动,以便div本身移动.(图4)

希望现在有点清楚.

(图片感谢gomockingbird.com)

Answer 1

我认为如果不编写脚本就不可能实现这一目标，考虑到滚动元素的众多事件（单击、滚轮、向下箭头、空格键），这可能会很混乱。