Wie kann das Scrollen eines übergeordneten Elements verhindert werden, wenn das innere Element seine Scroll-Grenzen erreicht?

Verhindern des Scrollens eines übergeordneten Elements an den Scrollgrenzen des inneren Elements

Bei der Arbeit mit einem schwebenden Element mit fester Position und scrollbarem Inhalt ist es oft wünschenswert, dies zu tun Verhindern Sie, dass das übergeordnete Element das Scroll-Ereignis übernimmt, wenn das innere Element seine Ober- oder Unterseite erreicht. Dies kann besonders frustrierend sein, wenn das innere Element über einen begrenzten Scrollbereich verfügt.

Fehlgeschlagene Versuche mit Ereignis-Bubbling

Anfangs wurde angenommen, dass stoppropagation() das effektiv blockieren könnte Ereignis, das zum übergeordneten Element sprudelt. Es wurde jedoch festgestellt, dass sich das Ereignis trotz Eingabe der angegebenen Funktion immer noch ausbreitete.

Mausrad-Ereignisbehandlungslösung

Der richtige Ansatz bestand darin, das Mausrad-Ereignis direkt zu behandeln. Durch die Erkennung des WheelDelta des Ereignisses und die Verwendung browserspezifischer Normalisierungsfaktoren ist es möglich, die Bildlaufrichtung (nach oben/unten) und den Betrag zu bestimmen, um den das Element gescrollt wird.

Edge Case Handling

Der Faktor „關鍵“ behandelte Randfälle, bei denen das Mausradereignis die Bildlaufposition über die Grenzen des inneren Elements hinaus verschieben würde. Indem überprüft wird, ob die Bildlaufposition oben oder unten war, und diese entsprechend angepasst wird, kann in diesen Fällen verhindert werden, dass das übergeordnete Element scrollt.

Arbeitslösung

Der folgende jQuery-Code verwendet diesen Ansatz:

<code class="javascript">$(".Scrollable").bind('mousewheel DOMMouseScroll', function(ev) {
    var $this = $(this),
    scrollTop = this.scrollTop,
    scrollHeight = this.scrollHeight,
    height = $this.innerHeight(),
    delta = (ev.type == 'DOMMouseScroll' ? ev.originalEvent.detail * -40 : ev.originalEvent.wheelDelta),
    up = delta > 0;

    if (!up && -delta > scrollHeight - height - scrollTop) {
        $this.scrollTop(scrollHeight);
        ev.preventDefault();
    } else if (up && delta > scrollTop) {
        $this.scrollTop(0);
        ev.preventDefault();
    }
});</code>

Durch das Abfangen und Normalisieren des Mausrad-Ereignisses stellt dieser Code sicher, dass die Bildlaufposition des inneren Elements innerhalb ihrer Grenzen bleibt, und verhindert so effektiv, dass das übergeordnete Element ggf. scrollt.

Das obige ist der detaillierte Inhalt vonWie kann das Scrollen eines übergeordneten Elements verhindert werden, wenn das innere Element seine Scroll-Grenzen erreicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!