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

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

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

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

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

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

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

编辑

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

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

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

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

希望现在有点清楚.

 (图片感谢gomockingbird.com)

解决方法:

考虑到滚动元素的众多事件(点击,滚轮,向下箭头,空格键),我认为没有脚本就可以实现,这可能会很麻烦.

标签：mousewheel,javascript,css,focus,scroll
来源： https://codeday.me/bug/20191007/1868486.html