Comment empêcher la propagation du défilement de l'élément parent lorsque l'élément interne atteint la fin ?

Empêcher la propagation du défilement de l'élément parent lorsque l'élément interne atteint la fin

Lors du défilement dans un div fixe avec débordement, il arrive souvent que le défilement La requête est "reprise" par l'élément parent, provoquant le défilement du document externe au-delà de la boîte à outils. Ce comportement peut être stoppé en empêchant la propagation de l'événement de défilement.

Bien que la méthode jQuery event.stoppropagation() puisse sembler une solution appropriée, elle ne parvient pas à empêcher complètement la propagation. Au lieu de cela, une approche plus efficace consiste à gérer l'événement mousewheel dans jQuery.

L'événement mousewheel fournit une propriété wheelDelta qui indique la direction et la quantité de défilement. En vérifiant la valeur wheelDelta, vous pouvez déterminer si le défilement dépasserait le haut ou le bas du div interne.

Pour la compatibilité avec Internet Explorer, la propriété originalEvent.detail doit être utilisée, qui a un signe inversé de les autres navigateurs. Multiplier les détails par -40 normalise les valeurs dans tous les navigateurs.

Le code jQuery fourni démontre cette approche :

<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>

En gérant l'événement mousewheel et en empêchant la propagation du défilement lorsque vous atteignez le bord du div interne, vous pouvez efficacement empêcher le comportement indésirable du défilement de l'élément parent et conserver le défilement dans le conteneur souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!