Wie kann verhindert werden, dass ein übergeordnetes Element scrollt, wenn ein festes und scrollbares untergeordnetes Element seinen Rand erreicht?

Scrollen des übergeordneten Elements verhindern, wenn das untergeordnete Element den Rand erreicht

Bei der Verwendung eines festen und scrollbaren Elements innerhalb seines übergeordneten Elements kann es wünschenswert sein, das einzuschränken Scrollen des übergeordneten Elements, wenn das untergeordnete Element seinen oberen oder unteren Rand erreicht. Dieses Problem tritt auf, wenn innerhalb des untergeordneten Elements gescrollt wird und das übergeordnete Element übernimmt, was zu unerwünschtem Scrollen im Hintergrund führt.

Lösungsversuch und seine Einschränkungen

Anfänglich das Ereignis Die Methode .stoppropagation() wurde verwendet, um die Ereignisausbreitung zu stoppen. Diese Methode erwies sich jedoch als unwirksam, da es immer noch zu einer Ausbreitung kam.

Umfassende Lösung

Eine effektivere Lösung besteht darin, das Mausradereignis mithilfe von jQuery zu verarbeiten. Die Lösung nutzt die Eigenschaft „wheelDelta“, wobei positive Werte ein Scrollen nach oben und negative Werte ein Scrollen nach unten anzeigen.

Hier ist eine detaillierte Erklärung des Skripts:

1. Ereignisbehandlung: Der jQuery-Code lauscht sowohl auf „DOMMouseScroll“- (für Firefox) als auch auf „Mousewheel“-Ereignisse (für andere Browser) für Elemente mit der Klasse „.Scrollable“.
2. Bildlaufrichtungserkennung: Der Delta-Wert wird verwendet, um die Bildlaufrichtung zu bestimmen.
3. Standardaktion verhindern: Eine Verhinderungsfunktion ist definiert, um den Bildlauf anzuhalten.
4. Edge Case Checks : Das Skript sucht nach Randfällen, bei denen das Scrollen die minimale oder maximale Position des scrollbaren Elements überschreiten würde.
5. Anpassen der Bildlaufposition: Wenn ein Randfall erkannt wird, wird das Skript eingestellt Der scrollTop-Wert wird entweder auf 0 (oben) oder auf die scrollHeight (unten) des scrollbaren Elements gesetzt.
6. Ereignisstornierung: Die Verhinderungsfunktion wird ausgeführt, um das Ereignis vollständig abzubrechen und sicherzustellen, dass dies der Fall ist nicht an das übergeordnete Element weitergegeben.

Durch die Verwendung dieser Lösung kann unerwünschtes Scrollen im übergeordneten Element effektiv verhindert werden, unabhängig vom verwendeten Browser.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass ein übergeordnetes Element scrollt, wenn ein festes und scrollbares untergeordnetes Element seinen Rand erreicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!