Comment empêcher le défilement d'un élément parent lorsqu'un élément enfant fixe et défilable atteint son bord ?

Empêcher le défilement de l'élément parent lorsque l'enfant atteint le bord

Lors de l'utilisation d'un élément fixe et défilant au sein de son parent, il peut être souhaitable de restreindre le défilement du parent lorsque l'élément enfant atteint son haut ou son bas. Ce problème survient lors du défilement au sein de l'élément enfant et que l'élément parent prend le relais, provoquant un défilement indésirable en arrière-plan.

Tentative de solution et ses limites

Initialement, l'événement La méthode .stoppropagation() a été utilisée pour arrêter la propagation des événements. Cependant, cette méthode s'est avérée inefficace car la propagation a quand même eu lieu.

Solution complète

Une solution plus efficace consiste à gérer l'événement mousewheel à l'aide de jQuery. La solution utilise la propriété wheelDelta, où les valeurs positives indiquent un défilement vers le haut et les valeurs négatives indiquent un défilement vers le bas.

Voici une explication détaillée du script :

1. Gestion des événements : Le code jQuery écoute à la fois les événements 'DOMMouseScroll' (pour Firefox) et 'mousewheel' (pour les autres navigateurs) sur les éléments avec la classe '.Scrollable'.
2. Détection de la direction de défilement : La valeur delta est utilisée pour déterminer la direction de défilement.
3. Action par défaut de prévention : Une fonction de prévention est définie pour arrêter le défilement.
4. Vérifications de cas Edge  : Le script vérifie les cas limites où le défilement dépasserait la position minimale ou maximale de l'élément déroulant.
5. Ajustement de la position du défilement : Si un cas limite est détecté, le script définit la valeur scrollTop à 0 (en haut) ou à la scrollHeight (en bas) de l'élément déroulant.
6. Annulation d'événement : la fonction de prévention est exécutée pour annuler entièrement l'événement, en garantissant qu'il le fait ne se propage pas à l'élément parent.

En utilisant cette solution, le défilement indésirable dans l'élément parent peut être efficacement empêché, quel que soit le navigateur utilisé.

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!