28172 sujets

CSS et mise en forme, CSS3

CSS scroll snap

Bonjour,
je me pointe ici pour obtenir de l'aide que je n'arrive à obtenir nulle part ailleurs. Alors voilà, je suis en ce moment en train de créer un site web pour mes projets d'histoire (le lien du site pas fini). Rien de très sérieux juste pour renforcer mes connaissances. Mais voilà, comme le site est en une page j'ai besoin d'acres ce qui marche très bien, mais j'ai beau avoir feuilleté les profondeurs de l'Internet je n'arrive pas à faire fonctionner CSS scroll snap. Ça me frustre car tout fonctionne à part ça Smiley bawling . Bref, voilà si vous pouviez m'aider et me dire ce qui ne va pas e serais très reconnaissant. Merci d'avance Smiley biggrin 
<body>
    	<!-- Tout ce que le site affiche -->
	    	<header>
               </header>
               <section id="section-bienvenue">
               </section>

               <div id="equipe-ancre" class="anchor">ANCRE</div>

	        <section id="section-equipe">
                </section>
			
		<div id="projets-ancre" class="anchor">ANCRE</div>

                <section id="section-projets">
                </section>

                <div id="contact-ancre" class="anchor">ANCRE</div>
                
               <section id="section-contact">
               </section>
                <footer>
	    	</footer>
</body>


body {
	margin: 0px;

	font-family: modern_font;
	display: grid;
	height: 365vh;
	grid-template-rows: 15vh 85vh repeat(3, 85vh) 10vh;
	grid-template-columns: auto;
	grid-template-areas: "header"
						 "bienvenue"
						 "equipe"
						 "projets"
						 "contact"
						 "footer";
	overflow-y: auto;
	scroll-snap-type: y mandatory;

	}
.anchor {
	border: 2px black solid;
	scroll-snap-align: start;
}
Coucou, tu peux t'inspirer de ceci que j'ai fait en jquery (;
Si tu as des questions n'hésite pas. 


$("#element-menu").click(function(){ 
var id = "#ancre"
/* à partir d'ici ne change plus rien (; */
var offset = $(id).offset().top 
$('html, body').animate({scrollTop: offset}, 'slow'); 
return false; 
});

Modifié par vzytoi (17 Apr 2020 - 23:02)
Qu'est ce que je dois changer dans ton code pour que ça fonctionne. Je m'y connais vraiment pas en jquerry ^^
Jean-Pierre-Bruneau a écrit :

J'ai toute la page feuilles de style, Javascript, images ça marche très bien, mais tu place ton code ou Smiley confused Smiley confused Smiley confused


Moi je ferait du 100% CSS comme ceci https://codepen.io/jplyne/pen/rNOLVBB

J'ai vu ton exemple, mais le défilement ne s'attache pas aux ancres? Devraient-elles?
Jean-Pierre-Bruneau a écrit :
Mais si, c'est bien mieux en html5 en CSS l'id d'un objet est désignable avec #son id

&lt;body translate="no"&gt;
&lt;nav&gt;
&lt;a href="#page-1"&gt;1&lt;/a&gt;
&lt;a href="#page-2"&gt;2&lt;/a&gt;
&lt;a href="#page-3"&gt;3&lt;/a&gt;
&lt;/nav&gt;
&lt;scroll-container&gt;
&lt;scroll-page id="page-1"&gt;1&lt;/scroll-page&gt;
&lt;scroll-page id="page-2"&gt;2&lt;/scroll-page&gt;
&lt;scroll-page id="page-3"&gt;3&lt;/scroll-page&gt;
&lt;/scroll-container&gt;
&lt;/body&gt;
&lt;/html&gt;

Quand tu clic "1" il va comme lui dit le lien à "#page-1" c'est à dire a l'objet qui est seul a avoir id="page-1"

C'est ce que tu avait ?? autre point les navigateurs ont déjà intégré cette fonction, donc aucune différence à voir ...
Ah oui encore un truc, il est super bien écrit ton GRID et ta page n'a aucun Default

Ah merci ! Non, à vrai dire ce que je veux faire c'est que lorsque l'utilisateur n'utilise pas le menu de navigation, sa vue s'attache quand même aux ancres. C'est ce dont je parle quand je parle de css snap-scroll. Mais ça ne fonctionne pas dans mon code. C'est pas si grave mais ça me frustre tout de même Smiley sweatdrop Voici un exemple de ce que j'essaye de faire. J'ai beau reproduire encore et encore le code lorsque je le met dans mon code ça ne fonctionne pas! https://codepen.io/tutsplus/pen/qpJYaK
vzytoi a écrit :
Coucou, tu peux t'inspirer de ceci que j'ai fait en jquery (;
Si tu as des questions n'hésite pas. 


$("#element-menu").click(function(){ 
var id = "#ancre"
/* à partir d'ici ne change plus rien (; */
var offset = $(id).offset().top 
$('html, body').animate({scrollTop: offset}, 'slow'); 
return false; 
});




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#element-menu").click(function(){ 
var id = "#ancre"
/* à partir d'ici ne change plus rien (; */
var offset = $(id).offset().top 
$('html, body').animate({scrollTop: offset}, 'slow'); 
return false; 
});
</script>
Sujet clos
Aller à