Tenho um layout de página com um<div id="content"> elemento que contém as coisas importantes na página. A parte importante sobre o design é:

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

Agora, quando o texto contido for maior que 300 px, preciso ser capaz de rolar o texto. É possível rolar o<div>, mesmo quando o mouse não está pairando o elemento (as teclas de seta também devem funcionar

Observe que não quero desativar a rolagem 'global': deve haver duas barras de rolagem na página, a barra de rolagem global e a barra de rolagem<div>.

A única coisa que muda é que o interior<div> sempre deve rolar, a menos que não possa mais ser movido (nesse caso, a página deve começar a rolar).

Isso é possível de alguma form

Edita

Acho que o problema foi um pouco confuso, então anexarei uma sequência de como gostaria que ele funcionasse. (A Khez já forneceu uma prova de conceito.)

A primeira imagem é a aparência da página quando abert

Agora, o mouse fica na posição indicada e rola e o que deve acontecer é que

Primeiro div interno rola seu conteúdo (Fig. 2) A div interna terminou a rolagem (Fig. 3)O elemento body rola para que o próprio div seja movido. (Fig. 4)

Espero que seja um pouco mais claro agor

(Imagem agradecida a gomockingbird.com)