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

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

I have a page layout with an inner <div id="content"> element which contains the important stuff on the page. The important part about the design is:

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

现在当包含的文本大于300px时，我需要能够滚动它。是否可以滚动< div> ，即使鼠标不悬停元素（箭头键也应该工作）？

Now when the containing text is larger than 300px, I need to be able to scroll it. Is it possible to scroll the <div>, even when the mouse is not hovering the element (arrow keys should also work)?

请注意，我不想禁用全局滚动：页面上应该有两个滚动条，全局滚动条和滚动条< div> 。

Note that I don’t want to disable the ‘global’ scrolling: There should be two scrollbars on the page, the global scrollbar and the scrollbar for the <div>.

唯一的变化是内部< div> 除非不能再移动（在这种情况下页面应该开始滚动）。

The only thing that changes is that the inner <div> should always scroll unless it can’t be moved anymore (in which case the page should start scrolling).

这是否可以实现某种方式？

Is this possible to achieve somehow?

编辑

我认为这个问题有点令人困惑，因此我会附上一个它工作。 （Khez已经提供了概念验证。）

I think the problem was a bit confusing, so I’ll append a sequence of how I would like it to work. (Khez already supplied a proof-of-concept.)

第一张图片是打开页面时的外观。

The first image is how the page looks when opened.

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

Now, the mouse sits in the indicated position and scrolls and what should happen is that

• 首先内部滚动其内容图2）


• 内部div已完成滚动（图3）


• body元素滚动以使div本身移动。 （图4）

希望现在更清楚了。

（感谢gomockingbird.com）

(Image thanks to gomockingbird.com)