11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Comment inverser le sens du scroll dans une div ?

Bonjour à tous !

Je viens vers vous car je suis confrontée à un problème que je n'arrive pas à résoudre.
J'avais déjà lancé un appel à l'aide sur ce forum, mais sans succès. Pour le topo, j'ai créé une div (assez longue) contenant une succession d'images (positionnées aléatoirement) et qui est placée de sorte à ce que le 'bottom' dépasse un peu
du haut de l'écran. J'aimerais à présent que lorsque l'utilisateur scroll, ces images défilent (la div qui les contient en réalité) du haut vers le bas. Il me faudrait donc inverser ce scroll ?
Je précise également qu'en absence de scroll, ces images défilent automatiquement via une animation css, et celle-ci prendra fin dès l'usage du scroll.

J'ai trouvé un exemple JSFiddle qui illustre assez bien ce que je cherche à faire, seulement il ne fonctionne pas dès lors que je l'applique à mon code. Je sais qu'il y a de grosses différences (mes images doivent par exemple être en 'absolute' pour autoriser le 'random', j'ai une hauteur de div défini, etc.) et c'est pourquoi j'aurais besoin d'aide, il y a un travail de 'conversion' qui m'échappe. D'autre part, je suis ouverte à toute autre solution, n'étant pas sûre que celle-ci soit la bonne pour mon cas. Vous trouverez, dans le lien ci-dessus (forum) une image qui illustre la marche à suivre, ainsi que les éléments de code liés. Il est également possible pour moi de faire parvenir un zip avec le contenu, c'est peut-être plus simple.

En tous cas je vous remercie d'avance pour vos réponses et vous souhaite une très belle journée !
Bonsoir, tu peux essayer les transformations CSS : pas besoin d'avoir recours au JS pour obtenir l'effet désiré.
Le principe: inverser le haut et le bas du #scroll-wrapper puis inverser le haut et le bas du #scroller ou de chacun des .img-defile.
Attention (particulièrement dans le second cas) : la propriété CSS top appliquée à un élément contenu dans élément inversé (typiquement le scroller-wrapper) correspondra à la distance depuis le bas du conteneur, et inversement pour bottom.

Un exemple simplifié du deuxième cas pour comprendre :
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<style>
			div[id="scroller-wrapper"] {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				overflow-y: scroll;
				overflow-x: hidden;
				transform: scale(1, -1);
				/* ... */
			}
			div[id="scroller"] {
				/* transform: scale(1, -1); */ /* Cas n°1 */
				/* ... */
			}
			div.img-defile {
				max-width:100%;
				height: 400px; /* exemple de taille quelconque */
				transform: scale(1, -1); /* Cas n°2 */
				/* ... */
				font-size: 40px;
				text-align: center;
			}
		</style>
		<title>Scroll inversé</title>
	</head>
	<body>
		<div id="scroller-wrapper">
			<div id="scroller">
				<div class="img-defile" style="background: green">1</div>
				<div class="img-defile" style="background: red">2</div>
				<div class="img-defile" style="background: white">3</div>
				<div class="img-defile" style="background: pink">4</div>
				<div class="img-defile" style="background: yellow">5</div>
			</div>
		</div>
	</body>
</html>

Je te laisse adapter le reste !
Modifié par TrisTOON (27 Feb 2017 - 21:18)
Meilleure solution
Merci mille fois Tris TOON ! J'y travaille activement aujourd'hui et te tiens au courant
de mon avancée ! En tous cas, je te suis très reconnaissante pour ta réponse ultra rapide Smiley cligne Passe une belle journée !
Et bien c'est avec grand plaisir que je peux affirmer que ta solution marche à merveille !
Je suis comblée, si ça ne t'embêtes pas, j'aimerais bien relayer ton astuce sur le forum 'Stack Overflow' (en te mentionnant bien évidemment), ainsi la question pourra être résolue et servir à d'autres éventuellement ! Un grand merci encore, 'you made my day' comme on dit !
Modifié par marjorie_ober (28 Feb 2017 - 11:42)
Pas de problème !
J'en profite pour rajouter qu'on peut également inverser le côté de la scrollbar en modifiant deux fois la propriété CSS direction.
Sujet clos
Aller à