Scrolle immer ein div-Element und nicht die Seite selbst

Ich habe ein Seitenlayout mit einem inneren <div id="content"> -Element, das die wichtigen Sachen auf der Seite enthält. Der wichtige Teil über das Design ist:

Wenn der enthaltene Text jetzt größer als 300 px ist, muss ich in der Lage sein, einen Bildlauf durchzuführen. Ist es möglich, die <div> zu scrollen, auch wenn die Maus nicht über das Element schwebt (die Pfeiltasten sollten auch funktionieren)?

Beachten Sie, dass ich das 'globale' Scrolling nicht deaktivieren möchte: Es sollte zwei Scrollbars auf der Seite geben, die globale Scrollbar und die Scrollbar für <div> .

Das einzige, was sich ändert, ist, dass das innere <div> immer scrollt, wenn es nicht mehr verschoben werden kann (in diesem Fall sollte die Seite scrollen).

Ist das irgendwie möglich?

Bearbeiten

Ich denke, das Problem war ein wenig verwirrend, also füge ich eine Sequenz hinzu, wie ich es gerne hätte. (Khez hat bereits einen Proof-of-Concept geliefert.)

Das erste Bild zeigt die Seite beim Öffnen.

Nun sitzt die Maus in der angegebenen Position und scrollt und was passieren soll ist das

• Zuerst scrollt das innere div seinen Inhalt (Abb. 2)
• Das innere Div hat das Scrollen beendet (Abb. 3)
• Das body-Element scrollt, so dass das div selbst verschoben wird. (Abb. 4)

Ich hoffe, es ist jetzt ein bisschen klarer.

(Bild Danke an gomockingbird.com)