Всегда прокручивайте элемент div, а не саму страницу

У меня есть макет страницы с внутренним элементом

, который содержит важную информацию на странице. Важная часть дизайна:

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

Теперь, когда размер содержащегося текста превышает 300 пикселей, мне нужно иметь возможность прокручивать его. Можно ли прокручивать

, даже если мышь не наводит курсор на элемент (клавиши со стрелками также должны работать)?

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

.

Единственное, что изменится, - это то, что внутренний

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

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

Править

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

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

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

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

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

Scroll concept (Изображение с сайта gomockingbird.com)

10
задан Debilski 15 April 2011 в 15:40
поделиться