28106 sujets

CSS et mise en forme, CSS3

Bonjour à tous

J'essaie en vain de faire une page avec un scroll horizontal inversé ! Smiley mur
un peu comme dans ce post : lien

... mais en version horizontal, dans mon codepen j'ai le mis le code de mon scroll horizontal mais je n'arrive pas à l'inverser !!
Le but est d'avoir un scroll non pas de gauche à droite mais de droite à gauche
au chargement de la page on arriverai (si on reste sur mon codepen) par la page last et ensuite on scroll pour arriver à la div 1 le tout en moletant la souris normalement c'est a dire de haute en bas... Smiley crash

Merci de votre aide Smiley biggol
Modifié par zero974 (01 Jul 2019 - 22:53)
Modérateur
Bonjour,

il est plus simple de partir de transform:scale(-x,x) ;
https://codepen.io/gc-nomade/pen/ydjypy

en gros:
[scroll] {
  overflow:auto;
  transform:scale(-1,1)
}

section {
  transform:scale(-1,1);
/* et au choix  pour modifier le contexte de formatage et laisser naturellement l'element debordé des 100% de largeur de la fenêtre : */
  display:inline-block;/* ou */
  float:left;
}

Modifié par gcyrillus (02 Jul 2019 - 12:29)
Sympa !! merci, mais là dans ton exemple le scroll est désactivé (je parle celui de la molette de la souris) et je cheche que ca défile lorsque on molette de haut vers le bas

... en tout cas super ton code

j'ai finalement réussi avec mon code codepen mais ca bug des que l'on resize la fenetre de facon non homothétique... :'(

je vais regarde avec ton code... mais si tu as une solution je suis preneur

EDIT :: lien ça marche ! derniere étape inverser le sens des div coloré de 90 degrés
Modifié par zero974 (02 Jul 2019 - 16:16)
Modérateur
okay, sans script pour rattraper le scroll, alors tu peut partir sur flex-direction: column-reverse; , box-sizing pour tenir au mieux les proportions , writing-mode pour le contenu et vh/vw avant de basculer l'ensemble sur le coté .

exemple https://codepen.io/gc-nomade/pen/rEvyqL
mais cela réduit de beaucoup le nombre de navigateur capable d'en faire quelque chose.

inspiré de https://codepen.io/gc-nomade/pen/rydGQW
Meilleure solution
Ooohh milles mercis l'ami !!

la meilleure solution serait de faire ca en JS... je me doute mais je suis vraiment nul en js ... déjà que j'ai besoin d'aide pour le css....
Modifié par zero974 (02 Jul 2019 - 21:08)