28172 sujets

CSS et mise en forme, CSS3

Scroll-snap nouvelles spécifications

Bonjour,

les nouvelles spécifications de scroll-snap sont sorties :

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat

Sur les navigateurs récents (après Firefox 68), l'ancienne spécification ne fonctionne plus. J'ai suivi les recommandations du site de Mozilla cité plus haut. Sur les anciens navigateurs, ça fonctionne toujours avec cette modification mais pas sur les nouveaux. Idem sur les mobiles récents, ça ne fonctionne pas non plus, alors qu'avec les anciennes spécifications, tout allait bien.
Voici mon code, qui ne fonctionne pas, modifié suivant les recommandations du site :
.galerie {
	display:flex;
	width:99%;
	max-width:99%;
	margin-left:6.2em;
	scrollbar-width:thin;  
	overflow-y:scroll;
    	scroll-snap-points-y: repeat(320px);
    	scroll-snap-destination: 0 0;
    	scroll-snap-type: y mandatory;
    	scroll-snap-type: mandatory;
    	transition-duration: 1s;}

.galerie img {
	width:100%;
	margin:0; 
	min-width:100%;
	align-self: center; /*pour le responsive*/
	overflow:hidden;
  	-ms-scroll-snap-align:start;
  	scroll-snap-align:start;}


Une idée ?
ps : Quand je vais sur le site en question avec un mobile récent, leur exemple ne fonctionne pas non plus ! Il doit y avoir quelque chose qui ne va pas dans leur code.
Modifié par Bongota (13 Sep 2021 - 11:13)
Ah mais c'est génial cette propriété ! je ne connaissais pas, merci !
Je viens d'essayer sur Chrome et Firefox : pas de problème chez moi.
Sur Android ça fonctionne aussi, mais je mets en mode paysage pour le test ; en effet, leur exemple n'est pas responsive, du coup on a du mal à percevoir si ça fonctionne ou non ; c'est ballot...

EDIT : j'ai testé à partir de cette page : MDN, scroll-snap-type.
Modifié par Olivier C (13 Sep 2021 - 20:30)
Oui, en effet, avec presque rien en css, on fait un slider compatible avec le toucher tactile et dont les images se calent exactement à leur place (le snap).
As-tu tenté avec les derniers navigateurs ? C'est bien ce qui est dit sur le site, les tous récents navigateurs.
Sur iPhone S8, ça ne fonctionne plus, sur les dernier SAMSUNG Android non plus. Alors que sur mon "vieux" Firefox en desktop, ça fonctionne.
Oui, j'ai essayé avec des navigateurs récents, de toute façon je n'ai pas le choix car ils se mettent à jour automatiquement, que ce soit sur ma Fedora (v. 34, Gnome 40) ou sur un vieux Windows Seven. Idem pour Chrome sur ma version Android qui est la dernière en date.
Modifié par Olivier C (13 Sep 2021 - 22:05)
Sujet clos
Aller à