я есть макет страницы с внутренним<div id="content"> элемент, который содержит важные вещи на странице. Важной частью дизайна является:

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

Теперь, когда содержащий текст больше, чем 300 пикселей, я должен иметь возможность прокручивать его. Можно ли прокрутить<div>, даже когда мышь не наводит на элемент (клавиши со стрелками тоже должны работать)?

Обратите внимание, что я не хочу отключать «глобальную» прокрутку: на странице должно быть две полосы прокрутки, глобальная полоса прокрутки и полоса прокрутки для<div>.

Единственное, что меняется, это то, что внутренний<div> следует всегда прокручивать, если только он больше не может быть перемещен (в этом случае страница должна начать прокручиваться).

Можно ли это как-то достичь?

редактировать

Я думаю, что проблема была немного запутанной, поэтому я добавлю последовательность того, как я бы хотел, чтобы она работала. (Khez уже предоставил подтверждение концепции.)

Первое изображение - это то, как выглядит страница при открытии.

Теперь мышь сидит в указанной позиции и прокручивает, и что должно произойти, это

Сначала внутренний div прокручивает свое содержимое (рис. 2)Внутренний блок завершил прокрутку (рис. 3)Элемент body прокручивается так, что сам div перемещается. (Рис. 4)

Надеюсь, теперь это немного понятнее.

 (Изображение благодаря gomockingbird.com)