Wie verhindert man die Weitergabe des Bildlaufs eines übergeordneten Elements, wenn das innere Element das Ende erreicht?

Verhindern der Scroll-Ausbreitung des übergeordneten Elements, wenn das innere Element das Ende erreicht

Beim Scrollen innerhalb eines festen Divs mit Überlauf kommt es häufig vor, dass der Scroll Die Anfrage wird vom übergeordneten Element „übernommen“, wodurch das äußere Dokument über die Toolbox hinaus gescrollt wird. Dieses Verhalten kann gestoppt werden, indem die Weitergabe des Scroll-Ereignisses verhindert wird.

Die jQuery-Methode event.stoppropagation() scheint zwar eine geeignete Lösung zu sein, kann die Weitergabe jedoch nicht vollständig verhindern. Ein effektiverer Ansatz besteht stattdessen darin, das Mousewheel-Ereignis in jQuery zu verarbeiten.

Das Mousewheel-Ereignis stellt eine WheelDelta-Eigenschaft bereit, die die Richtung und den Umfang des Scrollens angibt. Durch Überprüfen des WheelDelta-Werts können Sie feststellen, ob der Bildlauf über den oberen oder unteren Rand des inneren Div hinausgehen würde.

Für die Internet Explorer-Kompatibilität muss die Eigenschaft originalEvent.detail verwendet werden, die ein umgekehrtes Vorzeichen hat die anderen Browser. Durch Multiplizieren der Details mit -40 werden die Werte in allen Browsern normalisiert.

Der bereitgestellte jQuery-Code demonstriert diesen Ansatz:

<code class="javascript">$(document).on('DOMMouseScroll mousewheel', '.Scrollable', function(ev) {
    // Get the div's scroll properties
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.innerHeight(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta);

    // Determine if the scroll would exceed the edge conditions
    if (delta > 0 && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down past the bottom, prevent and scroll to bottom
        $this.scrollTop(scrollHeight);
        ev.stopPropagation();
        ev.preventDefault();
        return false;
    } else if (delta < 0 && delta > scrollTop) {
        // Scrolling up past the top, prevent and scroll to top
        $this.scrollTop(0);
        ev.stopPropagation();
        ev.preventDefault();
        return false;
    }
});</code>

Durch die Behandlung des Mausradereignisses und die Verhinderung der Scroll-Weitergabe beim Erreichen des Randes des inneren Div können Sie das unerwünschte Verhalten des übergeordneten Elements beim Scrollen wirksam verhindern und den Bildlauf im gewünschten Container halten.

Das obige ist der detaillierte Inhalt vonWie verhindert man die Weitergabe des Bildlaufs eines übergeordneten Elements, wenn das innere Element das Ende erreicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!