始终滚动div元素，而不是页面本身 [英] Always scroll a div element and not page itself

问题描述

我有一个页面布局，内含< 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)

推荐答案

我不认为这是可能实现没有脚本，它可能是凌乱的，考虑到滚动元素（点击，滚轮，下箭头，空格键） 。

I don't think that is possible to achieve without scripting it, which could be messy, considering the numerous events which scroll an element (click, scrollwheel, down arrow, space bar).

这篇关于始终滚动div元素，而不是页面本身的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！