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

Empêcher le défilement d'un élément parent lorsque l'élément interne atteint les limites du bord

Dans certains scénarios, le défilement dans un élément interne peut déclencher un défilement indésirable du parent élément lorsque les limites de bord de l’élément interne sont atteintes. Cela peut être particulièrement frustrant lors de l'interaction avec des boîtes à outils flottantes ou des volets à positionnement fixe.

Pour éviter cette propagation indésirable, il est nécessaire de gérer l'événement scroll sur l'élément interne et de l'empêcher de remonter jusqu'au parent. Cependant, la simple utilisation de event.stopPropagation() peut ne pas suffire dans tous les cas.

La solution la plus fiable consiste à utiliser l'événement mousewheel, qui permet de normaliser le comportement de défilement dans différents navigateurs. En comparant le delta de la molette de la souris à la position de défilement de l'élément interne, nous pouvons déterminer si le défilement a atteint les limites supérieure ou inférieure.

Si le défilement a atteint l'une ou l'autre limite, nous pouvons annuler l'événement et utiliser scrollTop( ) pour définir la position de défilement sur la valeur minimale ou maximale appropriée. Cette approche empêche efficacement l'événement de se propager au parent et garantit un défilement fluide au sein de l'élément interne.

Voici un extrait de code qui implémente cette solution :

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

Cette solution prend en compte la souris le défilement vers le haut et vers le bas et empêche le défilement indésirable de l'élément parent dans Internet Explorer et d'autres navigateurs.

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!