Comment empêcher le défilement de l'élément parent lorsque l'élément interne atteint ses limites de défilement ?

Empêcher le défilement d'un élément parent sur les limites de défilement d'un élément interne

Lorsque vous travaillez avec un élément flottant à position fixe avec un contenu défilant, il est souvent souhaitable de empêcher l'élément parent de prendre en charge l'événement de défilement lorsque l'élément interne atteint son haut ou son bas. Cela peut être particulièrement frustrant lorsque l'élément interne a une plage de défilement limitée.

Tentatives infructueuses avec le bouillonnement d'événements

Au départ, il était supposé que stoppropagation() pouvait effectivement bloquer le événement bouillonnant vers l’élément parent. Cependant, il a été constaté que l'événement se propageait toujours, malgré la saisie de la fonction spécifiée.

Solution de gestion des événements de la molette de la souris

L'approche correcte impliquait la gestion directe de l'événement de la molette de la souris. En détectant le wheelDelta de l'événement et en utilisant des facteurs de normalisation spécifiques au navigateur, il est possible de déterminer la direction de défilement (haut/bas) et la quantité de défilement de l'élément.

Gestion des cas extrêmes

Le facteur principal était la gestion des cas extrêmes où l'événement mousewheel poussait la position de défilement au-delà des limites de l'élément interne. En vérifiant si la position de défilement était en haut ou en bas et en l'ajustant en conséquence, il devient possible d'empêcher l'élément parent de défiler dans ces cas.

Solution de travail

Le code jQuery suivant utilise cette approche :

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

En interceptant et en normalisant l'événement mousewheel, ce code garantit que la position de défilement de l'élément interne reste dans ses limites, empêchant efficacement l'élément parent de défiler lorsque cela est approprié.

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!