Horizontal scroller avec Mootools

Question

Je travaille sur un site pour moi-même, et j'utilise un scroller horizontal personnalisé fait avec Mootools que j'ai obtenu d'un autre site (et obtenu leur permission d'utiliser). Alors que j'ai réussi à faire fonctionner le scroller comme je le souhaite, il y a deux problèmes que je cherche à résoudre et que je n'ai pas le savoir-faire pour le résoudre.

J'ai configuré une page de démonstration simple here.

Vous pouvez faire défiler la molette de la souris ou du pavé tactile vers le haut ou vers le bas ou vers la gauche ou la droite, vous pouvez saisir le défilement et le faire glisser. Donc, toutes les fonctionnalités sont correctes. Mes questions sont les suivantes:

1. Si vous faites défiler vers le milieu (ou nulle part, sauf la position de départ), puis redimensionner la fenêtre de votre navigateur, la poignée de barre de défilement va revenir en arrière au début/à gauche, même si le contenu reste en place. Si vous recommencez à défiler, le contenu revient en arrière pour s'aligner sur la position de la poignée de défilement. Idéalement, la poignée resterait en place lorsque la fenêtre est redimensionnée, mais je ne peux pas comprendre comment faire cela tout seul.

2. À la fin/à la droite de la page, j'aimerais disposer d'un bouton de retour qui vous ramène doucement au début/«haut». Le mieux que j'ai réussi est ce que vous voyez là maintenant, où le contenu défile doucement, tandis que le défileur revient simplement à sa première position. Bien que je puisse contourner ce problème en le faisant revenir directement au début, il serait certainement plus beau si le défilement revenait en douceur comme le fait le contenu.

Une aide avec ceci serait grandement appréciée!

Answer 1

Votre premier problème est dû au fait que positionIt() est appelée à chaque fois que la fenêtre est redimensionnée. En regardant dans cette fonction, vous pouvez voir que bottomSlider est en cours d'initialisation à chaque fois. Je casserai positionIt() dans une fonction d'initialisation et de positionnement, et m'assurerai que seule la fonction de positionnement est appelée quand la fenêtre est redimensionnée.

Le deuxième problème pourrait probablement être résolu en créant une fonction step() séparée pour bottomSlider et en l'appelant dans onChange, plutôt que d'utiliser une fonction anonyme en ligne. Vous pouvez ensuite créer une minuterie ou une interpolation qui appelle step() pour ramener la barre de défilement à sa position d'origine (et ensuite déplacer la fenêtre conformément à celle-ci.)

Espérons que cela ait du sens!