Discussion :

[kodjoe]

Bonjour les amis je souhaiterai supprimer la scroll de la page parent lorsque nous nous trouvons sur la page credit, tout en laissant la possibilité à la page credit d'avoir sa propre scroll Smiley lol

vous avez une idée ?


voici le lien

http://jsfiddle.net/kodjoe/r051Ls8g/




merci

[NoSmoking]

Bonjour,
pas sûr d'avoir bien compris mais je me hasarderais à mettre le contenu devant être scrollé dans un parent, DIV par exemple, scrollable.

[kodjoe]

comment tu coderais ça ?

[NoSmoking]

Bon après avoir recopier ton code je me rend compte que je n'avais rien compris à ton soucis heureusement je m'étais couvert

pas sûr d'avoir bien compris mais...

je supprimerais overflow: scroll; de la class .modal__overlay {, si j'ai mieux compris cette fois.

[kodjoe]

effectivement tu as compris mon soucis

Mais si on supprime overflow:scroll, ça supprime la scroll lorsque l'on est sur "credit", impossible de scroller si il y a du contenu !!

[Invité]

Bonjour,
on pourrait peut-être tester... encore faudrait-il que tu fournisses un code COMPLET*, et pas juste celui du "modal"...

Et le code CSS nécessaire* et SUFFISANT : là, on y voit .grid-nav (un menu ?) et autres input:checked,.... qui n'apparaissent nulle part dans le code HTML fourni.

+ explique mieux ce qui doit scroller... ou pas.

* : un exemple SIMPLE suffit.

[NoSmoking]

on pourrait peut-être tester... encore faudrait-il que tu fournisses un code COMPLET*, et pas juste celui du "modal"...

je vois que tu as eu les mêmes difficulté que moi à saisir le problème.

(...)est sur "credit", impossible de scroller si il y a du contenu !!

si je ne m'abuse cet élément et en position:fixed, donc pour le coté scrollable de l'histoire tu pourras repasser.

Place le en position:absolute dans ce cas et grâce au sélecteur d'adjacence indirecte (~) profite en pour mettre ton élément suivant en display:none par exemple

d'après ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
input:checked ~ .modal__overlay {
    opacity:1;
    transform:scale(1);
    transition:all 0.75s cubic-bezier(0.19,1,0.22,1);
    z-index:800;
}
input:checked ~ .content {
    display: none;
}

et une structure du type

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<input id="modal" type="checkbox" name="modal" tabindex="1" style="opacity:0; position:absolute;"/>
<label class="opener" for="modal">Credits</label>
 
<div id="dialog" class="modal__overlay">
<!-- le contenu Crédit -->
</div>
 
<div class="content">
<!-- ton blabla -->
</div>