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

Question

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

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

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

请注意，我不想禁用“全局”滚动:页面上应该有两个滚动条，全局滚动条和<div> 的滚动条| .

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

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

编辑

我认为这个问题有点令人困惑，所以我将附加一个我希望它如何工作的序列。 (Khez 已经提供了概念验证。)

第一张图片是页面打开时的样子。

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

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

希望现在更清楚一些。

(图片感谢 gomockingbird.com)

Answer 1

我认为如果不编写脚本是不可能实现的，考虑到滚动元素的众多事件(点击、滚轮、向下箭头、空格键)，这可能会很困惑。