Wie kann verhindert werden, dass das übergeordnete Element scrollt, wenn das innere Element die Kantengrenzen erreicht?

Verhindern des Scrollens eines übergeordneten Elements, wenn das innere Element die Kantengrenzen erreicht

In bestimmten Szenarien kann das Scrollen innerhalb eines inneren Elements ein unerwünschtes Scrollen des übergeordneten Elements auslösen Element, wenn die Kantengrenzen des inneren Elements erreicht sind. Dies kann besonders frustrierend sein, wenn Sie mit schwebenden Toolboxen oder Fenstern mit fester Positionierung interagieren.

Um diese unerwünschte Ausbreitung zu verhindern, ist es notwendig, das Scroll-Ereignis auf dem inneren Element zu behandeln und zu verhindern, dass es zum übergeordneten Element übergeht. Allerdings reicht die einfache Verwendung von event.stopPropagation() möglicherweise nicht in allen Fällen aus.

Die zuverlässigste Lösung ist die Verwendung des Mousewheel-Ereignisses, das eine Möglichkeit bietet, das Scrollverhalten in verschiedenen Browsern zu normalisieren. Indem wir das Mausrad-Delta mit der Bildlaufposition des inneren Elements vergleichen, können wir feststellen, ob der Bildlauf die obere oder untere Grenze erreicht hat.

Wenn der Bildlauf eine der beiden Grenzen erreicht hat, können wir das Ereignis abbrechen und scrollTop( von jQuery verwenden) )-Methode, um die Bildlaufposition auf den entsprechenden Mindest- oder Höchstwert festzulegen. Dieser Ansatz verhindert wirksam, dass sich das Ereignis auf das übergeordnete Element ausbreitet, und gewährleistet ein reibungsloses Scrollen innerhalb des inneren Elements.

Hier ist ein Codeausschnitt, der diese Lösung implementiert:

<code class="javascript">$(".ToolPage").bind('mousewheel', function(e, d)  {
    var t = $(this);
    if (d > 0 && t.scrollTop() === 0) {
        e.preventDefault();
    } else {
        if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
            e.preventDefault();
        }
    }
});</code>

Diese Lösung berücksichtigt die Maus Scrollen nach oben und unten und verhindert unerwünschtes Scrollen des übergeordneten Elements im Internet Explorer und anderen Browsern.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass das übergeordnete Element scrollt, wenn das innere Element die Kantengrenzen erreicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!