Y a-t-il un moyen de lier un gestionnaire d'événements à un défilement horizontal par opposition à l'événement de défilement générique qui est tiré lorsque l'utilisateur fait défiler horizontalement et verticalement? Je souhaite déclencher un événement uniquement lorsque l'utilisateur fait défiler horizontalement.
J'ai cherché une réponse à cette question, mais ne pouvait pas sembler trouver rien.
Merci!
Ps Mes excuses si j'utilise de manière incorrecte de la terminologie. Je suis assez nouveau à JavaScript.
Merci beaucoup pour toutes vos réponses! En résumé, on dirait que vous dites tous que cela n'est pas pris en charge en JavaScript, mais je peux accomplir la fonctionnalité avec quelque chose comme ceci (en utilisant jQuery) (jsfiddle) : C'est tout ce dont je devais savoir. Merci encore!
6 Réponses :
Vous pouvez utiliser le même défilement événement, mais dans votre gestionnaire Utilisez le ScrollLeft fonction pour voir si la barre de défilement s'est déplacée horizontalement à partir de la dernière fois L'événement a été licencié. Si la barre de défilement n'a pas bougé, revenez de votre gestionnaire. Sinon, mettez à jour votre variable à la nouvelle position et prenez des mesures.
Vous pouvez vérifier si la valeur Si la valeur x de la page change et ignorez votre y .
x change: il y a votre défilement horizontal.
Non, il n'y a pas d'événement spécial pour Scroll horizontal (il s'agit pour le défilement global), mais vous pouvez essayer de vérifier la position du contenu par propriété .scrollleft et s'il est différent de la valeur précédente. Cela signifie que le contenu défilé par l'utilisateur horizontalement.
Votre réponse est incorrecte. Il détectera un défilement horizontal lorsque l'utilisateur fait défiler la première fois. Après cela, même s'il fait défiler vers le haut ou le bas, ScrollLeft va toujours être supérieur à 0, car il n'a pas fait défiler la gauche, et il s'inscrit donc faussement comme défilement horizontal.
Maintenant, je lis ça, tu as raison. Peut-être que ma réponse était un peu désordonnée ... il devrait se rappeler la dernière valeur de ScrollLeft Propriété et comparer NOUVEAU ET OIC.
ScrollLeft () n'est pas une propriété, c'est une fonction. Trivial, je sais, mais ne mettons pas en erreur les débutants en les faisant essayer de l'utiliser sans les parenthèses. :)
ScrollLeft est la fonction de jQuery :) à Vanilla JS est une propriété: développeur.mozilla.org/ Pl / DOM / ELEMENT.SCROLLLEFT
Avec la charge de page, stockez les positions de la barre de défilement initiale pour deux variables (probablement les deux seront 0). Ensuite, chaque fois qu'un événement de défilement se produit, trouvez le ScrollLeft et ScrollTop Propriétés. Si la valeur de la propriété ScrollLeft est différente et ScrollTop S est identique à celle par rapport à leurs valeurs antérieures, c'est un défilement horizontal. Puis définissez les valeurs des variables sur les nouvelles valeurs de défilement.
Répondre de mon téléphone, donc incapable de fournir du code pour le moment.
Ce que vous aurez besoin de faire est d'abonner à l'événement de défilement. Il n'y a pas de spécifique pour la verticale / horizontale.
Ensuite, vous devrez obtenir des mesures sur la zone d'affichage actuelle. Vous devrez mesurer la fenêtre.Clientheight et Window.ClientWidth.
Suivant, obtenez la fenêtre.top et la fenêtre.Left. Cela vous indiquera que la position de la fenêtre est, c'est-à-dire si elle est supérieure à 0, les barres de défilement ont été utilisées.
C'est assez simple de mathématiques d'ici pour obtenir ce dont vous avez besoin. Si personne d'autre n'a fourni d'exemple de code dans les prochaines heures, je vais essayer de le faire.
EDIT: Un peu plus d'informations.
Vous devez capturer l'événement de défilement. Vous devez également stocker la fenêtre initiale.Top et Window.LeFt Propriétés quelque part. Chaque fois que l'événement de défilement se produit, effectuez une vérification simple pour voir si les valeurs supérieure / gauche actuelles diffèrent de la valeur des magasins.
À ce stade, si vous êtes différent, vous pouvez déclencher vos propres événements personnalisés pour indiquer le défilement vertical ou horizontal. Si vous utilisez jQuery, c'est très facile. Si vous écrivez JS sans aide à la bibliothèque, c'est facile aussi mais un peu plus impliqué.
Faites des recherches sur l'expédition des événements dans JS.
Vous pouvez ensuite écrire n'importe quel autre code que vous souhaitez vous abonner à vos événements personnalisés sans avoir à les attacher avec des appels de méthode.
J'ai écrit un plugin JQuery pour vous qui vous permet de joindre des fonctions à l'événement code> Scrollh code>.
Voir l'action en action à jsfiddle.net . P> C'est ce facile à utiliser: p> $('#container')
.enableHScroll()
.on('scrollh', function(obj, offset) {
$('#info').val(offset);
});
Merci d'avoir posté cela, Erike.
S'il vous plaît voir ma nouvelle réponse qui peut vous être utile.