[Résolu] Empêcher le scroll - Tuto volet coulissant CSS3 :target (Geof

Bonjour,

J'ai suivi le tuto

https://www.alsacreations.com/tuto/lire/1234-creer-volet-coulissant-CSS3-target-transition.html

et bien sûr, je me retrouve avec ce problème du scroll de la page si le contenu est plus grand que la hauteur de mon écran.

J'ai trouvé une solution

http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap2

Mais je n'arrive pas du tout à l'adapter sur le code du tuto (que vous pouvez trouver ici :

https://www.w3schools.com/code/tryit.asp?filename=FNVDVZALM5FP

J'ai cherché des infos, j'ai testé plein de chose sur ce code, mais je bloque complètement.
Il faut appliqué le target à un élément non visible..ok . mais je n'y arrive pas du tout.

Pourriez vous m'aider?
Avez-vous réussi à trouver ou a comprendre la solution ci-dessus ?

merci beaucoup par avance
Timama

Bonjour Timama,

Un exemple :
https://codepen.io/Zonecss/pen/KeNEmK

oohhhh merci aliasdmc.... je regarde ça...

et je reviens pour faire un point.......

La page où j'ai adapté ce code est la suivante....
http://www.my-t-media.com/HRPwebsite/projekte/hochbau/projekt-hochbau/?id-projekt=45

j'espère revenir avec cette page qui fonctionne !

me revoici...

Alors, j'ajoute donc des balises <a> qui ne sont pas visible et qui serviront de target....
Mon ancien code était donc :

                <div id="volet_clos" >
                    <div id="volet" >
                        <h3><?php echo $title; ?> </h3><br />
                        <div>
                            <p> Bla bla dans fenêtre  </p> 
                        </div>
                        <a href="#volet" class="ouvrir " aria-hidden="true"> Details ausblenden</a>
                        <a href="#volet_clos" class="fermer" aria-hidden="true">Details anzeigen  </a>
                    </div>
                </div> 

#volet {
	width: 390px;
	height:580px;
	padding: 10px;
	background:rgba(230,230,230,0.55); 
	color: #000;	
}

#volet a.ouvrir,
#volet a.fermer {
	padding: 10px 25px;
	background: #555;
	color: #fff;
	text-decoration: none;
}

#volet {
	position: absolute;
	left: -410px;  /* test fixed + scroll, on retire la position top */
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
}
#volet a.ouvrir,
#volet a.fermer {
	position: absolute;
	right: 330px;
	top: 150px;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-moz-radius: 0 0 8px 8px;
	border-radius: 8px 8px 0 0 ;
	width: 150px;

text-align: center;
}
#volet a.fermer {
	display: none;
}
#volet:target {
	left: 0px;
}

/* code pour la fermeture */
#volet:target a.fermer {
	display: block;
}
#volet:target a.ouvrir {
	display: none;
}
#volet_clos:target #volet {
	left: -410px;
}

 /* test fixed + scroll */
#volet_clos {
	position: absolute; 
	top:0px;
	right: 0px;
}

Et voici mon nouveau code
(la différence avec le tuto c'est que j'ai la fenêtre à droite, qui est ouverte par défaut)

                <a id="voletclos" class="ancre"></a>
                <a id="volet" class="ancre"></a>
                <div id="blocvoletclos" >
                    <div id="blocvolet" >
                        <h3><?php echo $title; ?> </h3><br />
                        <div>
                            <p> Bla bla dasn fenêtre  </p> 
                        </div>
                        <a href="#volet" class="ouvrir " aria-hidden="true"> Details ausblenden</a>
                        <a href="#voletclos" class="fermer" aria-hidden="true">Details anzeigen  </a>
                    </div>
                </div> 

.ancre{display:none}

#blocvolet {
	width: 390px;
	height:580px;
	padding: 10px;
	background:rgba(230,230,230,0.55); 
	color: #000;	
}

#blocvolet a.ouvrir,
#blocvolet a.fermer {
	padding: 10px 25px;
	background: #555;
	color: #fff;
	text-decoration: none;
}

#blocvolet {
	position: absolute;
	left: -410px;  /* test fixed + scroll, on retire la position top */
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
}
#blocvolet a.ouvrir,
#blocvolet a.fermer {
	position: absolute;
	right: 330px;
	top: 150px;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-moz-radius: 0 0 8px 8px;
	border-radius: 8px 8px 0 0 ;
	width: 150px;
	text-align: center;
}

#blocvolet a.fermer {
	display: none;
}

#volet:target ~ #blocvolet{
	left: 0px;
}

/* code pour la fermeture */
#volet:target ~ #blocvolet a.fermer {
	display: block;
}
#volet:target ~ #blocvolet a.ouvrir {
	display: none;
}
#blocvolet:target #voletclos {
	left: -410px;
}

 /* test fixed + scroll */
#blocvoletclos {
	position: absolute; 
	top:0px;
	right: 0px;
}

Alors, je suis en train de travailler encore dessus car ma fenêtre ne se ferme plus....
Elle reste ouverte... j'ai du faire une bêtise quelque part.....

je reviens avec la solution

humm alors en fait, je pense que c'est plutôt, car c'est #blocvolet qui va vers #voletclos (mais rediriger en fait vers #blocvoletclos)

#voletclos:target ~ #blocvoletclos #blocvolet {
	left: -410px;
}

mais cela ne fonctionne pas.... ma fenêtre se fermait avant
et maintenant ne se ferme plus

serait il possible d'avoir vos avis? voici le lien
http://www.my-t-media.com/HRPwebsite/projekte/hochbau/projekt-hochbau/?id-projekt=45

alors me revoilà, après plusieurs tests, ma fenêtre ne se ferme toujours pas mais je pense que c'est la partie suivante qui ne fonctionne pas

/* code pour la fermeture */
#volet:target a.fermer ~ #blocvolet  {
	display: block;
}
#volet:target a.ouvrir  ~ #blocvolet {
	display: none;
}
#voletclos:target #blocvolet ~ #blocvoletclos  {
	left: -410px;
}

j'ai encore testé pas mal de chose un peu dans tous les sens...
j'ai l'impression que le target non visible ne fonctionne pas pour les balise a.ouvir et a.fermer

avez vous des remarques sur ce point?
merci beaucoup par avance pour votre aide
Timama

voici le code avec la fenêtre qui se ferme mais le problème de saut au coulissage de la fenêtre

https://codepen.io/Timama/pen/dKWdQy


et voici le code avec la fenetre qui ne se ferme plus

https://codepen.io/Timama/pen/mKmXqJ



Et je ne vois pas pourquoi elle ne se ferme plus...... ou alors je n'ai pas compris les ~

merci pour votre aide
Modifié par Timama (12 Jun 2018 - 16:44)

J'ai réussi à fermer ma fenêtre, c'est juste le mouvement de transition qui ne se fait plus lentement (enfin, il se fait d'un coup)

https://codepen.io/Timama/pen/mKmXqJ


Mon code avant, quand la fenêtre ne se ferme plus est 4 posts au dessus.
Voici le code où la fenêtre se ferme (avec vitesse transition rapide)

                <a id="voletclos" class="ancre"></a>
                <a id="volet" class="ancre"></a>
                <div id="blocvolet" >
                    <div id="blocvoletclos" >
                        <h3><?php echo $title; ?> </h3><br />
                        <div>
                            <p>
                            <b>Leistungsphasen nach HOAI: </b><br/><?php echo $leistungsphasen; ?> <br/><br/>
                            <b>Bearbeitungszeitraum :  </b><br/><?php echo $bauzeit; ?> <br/><br/>
                            <b>Bauherr :  </b><br/><?php echo $Bauherr_projekt; ?> <br/><br/><br/>
                            <b>Beschreibung :  </b><br/><?php echo $beschreibung_projekt; ?> <br/><br/>
                            </p> 
                        </div>
                        <a href="#volet" class="ouvrir " aria-hidden="true"> Details ausblenden</a>
                        <a href="#voletclos" class="fermer" aria-hidden="true">Details anzeigen  </a>
                    </div>
                </div> 

/*le volet sans pb de saut à la fermeture */
.ancre{display:none}

#blocvolet {
	width: 390px;
	height:580px;
	padding: 10px;
	background:rgba(230,230,230,0.55); 
	color: #000;	
}
#blocvolet a.ouvrir,
#blocvolet a.fermer {
	padding: 10px 25px;
	background: #555;
	color: #fff;
	text-decoration: none;
}

#blocvolet {
	right: 0px;
	top: 0px;
	position: absolute;
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
}
#blocvolet a.ouvrir,
#blocvolet a.fermer {
	position: absolute;
	right: 330px;
	top: 150px;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-moz-radius: 0 0 8px 8px;
	border-radius: 8px 8px 0 0 ;
	width: 150px;
	text-align: center;
}
#blocvolet a.fermer {
	display: none;
}
#volet:target ~ #blocvolet{
	left: 100%;
}


/* code pour la fermeture */

#volet:target ~ #blocvolet a.fermer {
	display: block;
}
#volet:target ~ #blocvolet a.ouvrir {
	display: none;
}
#voletclos:target #blocvolet ~ #blocvoletclos  {
	left: -410px;
}

#blocvoletclos {
}
/* fin volet sans problème */

donc il me reste à régler le problème de vitesse de transition et c'est bon.
Il faut que je trouve pourquoi la transition ne se fait plus comme demandée

Si vous voyez pourquoi , n'hesitez pas à me le dire !
merci beaucoup par avance

Bonjour,

Voici le code, avec donc la fenêtre à droite, qui ne "saute" pas et qui se ferme, avec une bonne vitesse de transition

                
<a id="voletclos" class="ancre"></a>
                <a id="volet" class="ancre"></a>
                <div id="blocvolet" >
                    <div id="blocvoletclos" >
                        <h3><?php echo $title; ?> </h3><br />
                        <div>
                            <p>
                            <b>Leistungsphasen nach HOAI: </b><br/><?php echo $leistungsphasen; ?> <br/><br/>
                            <b>Bearbeitungszeitraum :  </b><br/><?php echo $bauzeit; ?> <br/><br/>
                            <b>Bauherr :  </b><br/><?php echo $Bauherr_projekt; ?> <br/><br/><br/>
                            <b>Beschreibung :  </b><br/><?php echo $beschreibung_projekt; ?> <br/><br/>
                            </p> 
                        </div>
                        <a href="#volet" class="ouvrir " aria-hidden="true"> Details ausblenden</a>
                        <a href="#voletclos" class="fermer" aria-hidden="true">Details anzeigen  </a>
                    </div>
                </div> 

.ancre{display:none}

#blocvolet {
	width: 390px;
	height:580px;
	padding: 10px;
	background:rgba(230,230,230,0.55); 
	color: #000;	
}
#blocvolet a.ouvrir,
#blocvolet a.fermer {
	padding: 10px 25px;
	background: #555;
	color: #fff;
	text-decoration: none;
}

#blocvolet {
	right: 0px;
	top: 0px;
	position: absolute;
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
}
#blocvolet a.ouvrir,
#blocvolet a.fermer {
	position: absolute;
	right: 330px;
	top: 150px;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-moz-radius: 0 0 8px 8px;
	border-radius: 8px 8px 0 0 ;
	width: 150px;
	text-align: center;
}
#blocvolet a.fermer {
	display: none;
}
#volet:target ~ #blocvolet{
	right:-410px;
}


/* code pour la fermeture */

#volet:target ~ #blocvolet a.fermer {
	display: block;
}
#volet:target ~ #blocvolet a.ouvrir {
	display: none;
}
#voletclos:target #blocvolet ~ #blocvoletclos  {
	left: -410px;
}

et ça fonctionne bien !

Merci pour l'aide !

Timama