Supprimer la scroll en arrière plan

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

vous avez une idée ?


voici le lien

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

merci
Modifié par kodjoed (04 Jun 2015 - 17:02)

personne n'a une petite idée ?
Modifié par kodjoed (04 Jun 2015 - 22:01)

Salut,

Comprends pas la question...
Tu veux supprimer la scrollbar puis en remettre une ensuite ?

Sinon, regarde du côté de la propriété overflow en css.
Modifié par MatthieuR (04 Jun 2015 - 23:29)

non en fait ce que je souhaiterai c'est que la scrollbar que l'on peut voir lorsque nous nous trouvons sur la page, soit caché uniquement lorsque l'on se trouve sur "credits"

lorsque tu cliques sur "credits" la scroll de la page est toujours visible et active, voilà mon souci !! Ce qui veut dire que lorsque le contenu de la partie "credits" nécessite aussi une scroll, on se retrouve avec les deux scroll à gerer, et c'est pas du tout possible
Modifié par kodjoed (05 Jun 2015 - 01:05)

Difficile de t'aider sans voir la page (ou son code)...

Tu as une scrollbar car ton contenu est plus haut que ta fenêtre ?

j'ai mis un lien jsfiddle -> http://jsfiddle.net/kodjoe/r051Ls8g/
en fait ma scroll apparait car mon contenu est trop long pour ma résolution, mais lorsque je suis sur "credit" je ne veux pas héritez de cette scroll qui sert simplement pour le défilement de la page en arrière plan !!




voici le code

* { padding: 0; margin: 0; }

body { background: #fff; overflow-x: hidden; font-family: 'Arial', sans-serif }



#closemenu {
  font-family: "Raleway", "Arial", sans-serif;
  font-size: 3em;
  font-weight: 100;
  border: 0px solid #fff;
  text-align: right;
  color: #000;
  background: none;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
#closemenu:hover { background: none; color: #e0ccb4; }

.closemenuposition {
  z-index: 9997;
  position: fixed;
  top: 20px;
  right: 20px;
  max-height: 40px;
  max-width: 40px;
  background: none repeat scroll 0% 0% transparent;
  border: 0;
}

ul.grid-nav { list-style: none; }

ul.grid-nav li { display: inline-block; }

ul.rig li img { width: 100%; }

ul.grid-nav li a {
  display: inline-block;
  background: #999;
  text-decoration: none;
  border: 0px;
}

.grid-container { display: none; }

ul.rig.columns-4 li {
  width: 90%;
  max-width: 300px;
  max-height: auto;
  text-align: left;
}

ul.rig { list-style: none; margin: 0; }

ul.rig li {
  display: inline-block;
  margin: 50px 10px;
  background: none;
  border: 0px solid #ddd;
  vertical-align: top;
  box-shadow: 0px #ddd;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
@media (max-width: 480px) {
  ul.grid-nav li { display: block; }
  ul.grid-nav li a { display: block;  }
  ul.rig {  margin: 0; }
  ul.rig li { width: 100%; padding: 10px;  }
}

.credits { margin-top: 200px; }

input:focus + label {
  -webkit-transform: scale(0.97);
  -ms-transform: scale(0.97);
  transform: scale(0.97);
}
.modal { text-align: center; }

.modal > label {
  cursor: pointer;
  -webkit-transition: all 0.55s;
  transition: all 0.55s;
}

.modal__overlay {
  background: white;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  text-align: center;
  z-index: -800;
  opacity: 0;
  overflow: scroll;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}
input:checked ~ .modal__overlay {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 800;
}

<div class="modal">
<input id="modal" type="checkbox" name="modal" tabindex="1" style="opacity:0; position:absolute;" />
<label class="opener" for="modal">Credits (click here)</label>
<div id="dialog" class="modal__overlay">
    
<div class="closemenuposition"><label for="modal"><div id="closemenu">X</div></label></div>

<div class="credits">
<h2>CREDITS</h2>

<div class="container">
<ul class="rig columns-4">

<li>
<img src="0.png" alt="logo" />
<div class="slidetext">
<p>Irisgasse 2 Am Hof, 1010 Vienna</p>
</div>
</li>

<li>
<img src="1.png" alt="logo" />
<div class="slidetext">
<p>Wollzeile 11/Sort.Lad.55, 1010 Vienna</p>
</div>
</li>
          
</ul>
</div>
</div>
</div>
</div>

<br/><br/><br/>
<div style="height:2000px; background:#000; color:#fff;">contenue qui provoque une scroll<br/>blablabla</div>

Modifié par kodjoed (05 Jun 2015 - 19:13)

j'ai décidé de changer de code et de partir sur une autre modal!!!


en tout cas merci à vous ;D