Slider personalisé problème avec event 'wheel'
Ferméutub Messages postés 117 Date d'inscription dimanche 29 avril 2012 Statut Membre Dernière intervention 15 janvier 2023 - 15 janv. 2023 à 00:08
- Windows event log service must be running français
- Lire le coran en français pdf - Télécharger - Histoire & Religion
- Wetransfer français - Télécharger - Téléchargement & Transfert
- Clé windows 10 gratuit - Guide
- Windows 10 gratuit - Guide
- Orange service client - Guide
1 réponse
15 janv. 2023 à 00:08
Pour résoudre le problème n°1, vous pouvez utiliser une variable pour stocker la position actuelle de l'image plutôt que de définir une valeur en dur pour la translation. Voici un exemple de comment vous pourriez le faire:
let currentPosition = 0;
window.addEventListener("wheel", function(event) {
if (event.deltaY > 0) {
// scrolling down
currentPosition -= 50;
} else {
// scrolling up
currentPosition += 50;
}
document.querySelector(".left").style.transform = "translateY(" + currentPosition + "px)";
});
Pour résoudre le problème n°2, vous pouvez utiliser JavaScript pour calculer la hauteur de l'image et l'aligner au centre de la frame en utilisant cette valeur. Voici un exemple de comment vous pourriez le faire:
let frameHeight = document.querySelector(".card-frame").clientHeight;
let imageHeight = document.querySelector(".left").clientHeight;
let imageOffset = (frameHeight - imageHeight) / 2;
document.querySelector(".left").style.top = imageOffset + "px";
Pour résoudre le problème n°3, vous pouvez utiliser une transition CSS pour lisser la transition entre les différentes tailles d'image. Voici un exemple de comment vous pourriez le faire:
.left {
transition: width 0.5s ease;
}
Cependant, c'est juste un exemple, il peut y avoir des erreurs de syntaxe ou des erreurs dans le code, je vous recommande de vérifier que cela fonctionne correctement dans votre environnement de développement .
