Tengo un diseño de página con una @ inter<div id="content"> elemento que contiene las cosas importantes en la página. La parte importante sobre el diseño es:

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

Ahora cuando el texto que contiene es mayor de 300 px, necesito poder desplazarlo. ¿Es posible desplazar la<div>, incluso cuando el mouse no está pasando el elemento (las teclas de flecha también deberían funcionar)

enga en cuenta que no quiero deshabilitar el desplazamiento "global": debe haber dos barras de desplazamiento en la página, la barra de desplazamiento global y la barra de desplazamiento para la<div>.

a única cosa que cambia es que la @ inter<div> siempre debe desplazarse a menos que ya no se pueda mover (en cuyo caso la página debería comenzar a desplazarse).

¿Es esto posible lograr de alguna manera?

Edita

Creo que el problema fue un poco confuso, por lo que adjuntaré una secuencia de cómo me gustaría que funcionara. (Khez ya proporcionó una prueba de concepto).

La primera imagen es cómo se ve la página cuando se abre.

Ahora, el mouse se sienta en la posición indicada y se desplaza y lo que debería suceder es que

Primero el div interno desplaza su contenido (Fig. 2) El div interno ha terminado de desplazarse (Fig. 3)El elemento del cuerpo se desplaza para que el div se mueva. (Fig. 4)

Espero que ahora esté un poco más claro.

(Imagen gracias a gomockingbird.com)