Empêchez l'élément parent de défiler lorsque l'enfant atteint Edge

lorsque vous utilisez un élément fixe et défilé dans son parent ou en bas, il peut être souhaitable de restreindre le défilement du parent lorsque l'élément enfant atteint son parent ou de bas. Ce problème se pose lors du défilement dans l'élément enfant et que l'élément parent prend le relais, provoquant un défilement indésirable en arrière-plan.

Solution de limitation

initialement, la méthode event.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 s'est toujours produite.

Solution complète

Une solution plus efficace implique la gestion de l'événement de la roue de souris à l'aide de jQuery. La solution utilise la propriété Wheeldelta, où les valeurs positives indiquent que les valeurs de défilement vers le haut et négatives indiquent que le défilement vers le bas. Navigateurs) Sur les éléments avec la classe '.Scrollable'.

: la valeur delta est utilisée pour déterminer la direction de défilement. Vérifie
1. : le script vérifie les cas de bord où le défilement dépasserait la position minimale ou maximale de l'élément de défilement. élément.
Pour annulation de l'événement
2. : la fonction empêcher est exécutée pour annuler entièrement l'événement, en veillant à ce qu'il ne se propage pas à l'élément parent.
en utilisant cette solution, le défilement indéfectible dans l'élément parent peut être effectivement empêché, indépendamment de la solution utilisé.