Question

如果在打开信用卡复选框时如何隐藏滚动条，就像在此示例中一样

* {
  padding: 0;
  margin: 0;
}
body {
  background: #fff;
  overflow-x: hidden;
  font-family: 'Arial', sans-serif
}
/* bouton X pour fermer */

#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;
}
/* ----- GRID GALLERY ----- */

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;
}
/* ----- Image grids ----- */

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/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend, neque quis porta venenatis, neque dui vulputate eros, non pellentesque lorem leo eu sem. Vivamus semper lectus sit amet ipsum fermentum tincidunt. Fusce sit amet nisi pulvinar, luctus
  nulla in, volutpat diam. Fusce sit amet nunc elit. Sed at lorem consectetur, convallis lectus et, placerat arcu. Ut eu magna quis arcu ultrices aliquam vel quis tortor. Morbi vel rutrum ligula, in laoreet sapien.</p>
<p>Nam ultrices dignissim sapien, eu euismod elit ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sem orci, rhoncus ac mi et, gravida tincidunt mi. Pellentesque ac iaculis urna, ut mollis enim. In eleifend mauris turpis, interdum
  ultricies mi interdum eleifend. Fusce tristique, elit nec ornare tempor, nibh nulla vehicula eros, sed accumsan dui est vitae arcu. Duis ut sem efficitur, imperdiet diam ac, mattis nisi.</p>
<p>Aliquam quis orci tempor, iaculis quam at, commodo elit. Ut varius, diam vel finibus consectetur, tellus dolor cursus nisi, vel pulvinar nisl massa eu urna. Quisque pharetra rhoncus mauris, in pulvinar libero suscipit et. Proin interdum sodales elit,
  eget feugiat erat venenatis a. In sit amet urna sem. Maecenas vitae metus sed augue consequat auctor. Nam mollis nunc at metus consequat, non faucibus purus tempus. Morbi non aliquam lorem. Mauris vel lacus viverra odio fermentum efficitur lacinia eget
  ante. In ultrices, tellus eu rhoncus accumsan, lacus nisi rutrum leo, eget aliquam nisi nibh nec tellus. Pellentesque pretium et purus sit amet sodales. Curabitur varius eros magna, ac porttitor nibh molestie sit amet. Duis eleifend neque quis ultricies
  volutpat. Nulla sem sem, tempor eget commodo at, cursus sed sem. Proin vitae eleifend purus. Aliquam sed rhoncus elit.</p>
<p>Nam hendrerit sapien eget lectus auctor ornare. Quisque commodo metus vel ligula pellentesque, eu tempor dolor porta. Nunc sodales sollicitudin lectus, vitae venenatis lacus faucibus ac. In a faucibus tortor, eu ultricies tellus. Donec ullamcorper eros
  consequat, maximus urna eget, dictum est. Integer quis dui at augue rhoncus convallis. Nunc eget iaculis mauris. Sed quis ultricies nisi. Integer posuere porttitor iaculis. Sed bibendum vestibulum vehicula. Vivamus imperdiet orci sit amet sollicitudin
  efficitur. Donec porttitor mattis molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi egestas mi ac nisi blandit, sed ultrices nisl suscipit.</p>
<p>Phasellus eleifend id dolor accumsan tincidunt. Nam lobortis eros in porttitor elementum. Phasellus congue euismod quam in condimentum. Integer arcu metus, consectetur et quam in, tempor laoreet erat. Donec rhoncus iaculis dui vel placerat. Curabitur
  pellentesque venenatis leo, id gravida ipsum viverra ut. Nam dui justo, elementum id leo ut, porttitor vehicula velit. Curabitur bibendum, mauris a imperdiet molestie, urna libero tempus nisl, eget dapibus tortor lacus ac ligula. Phasellus vulputate
  ex nec ullamcorper cursus. Sed a lobortis enim, at condimentum sem. Praesent quis fringilla erat. Maecenas lacinia cursus faucibus. Phasellus vel arcu non nibh tincidunt hendrerit. Donec at eros pulvinar, porta mi a, faucibus sem. Duis sed pulvinar
  ante, vel interdum enim. Sed faucibus pulvinar tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend, neque quis porta venenatis, neque dui vulputate eros, non pellentesque lorem leo eu sem. Vivamus semper lectus sit amet ipsum fermentum tincidunt. Fusce sit amet nisi pulvinar, luctus
  nulla in, volutpat diam. Fusce sit amet nunc elit. Sed at lorem consectetur, convallis lectus et, placerat arcu. Ut eu magna quis arcu ultrices aliquam vel quis tortor. Morbi vel rutrum ligula, in laoreet sapien.</p>
<p>Nam ultrices dignissim sapien, eu euismod elit ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sem orci, rhoncus ac mi et, gravida tincidunt mi. Pellentesque ac iaculis urna, ut mollis enim. In eleifend mauris turpis, interdum
  ultricies mi interdum eleifend. Fusce tristique, elit nec ornare tempor, nibh nulla vehicula eros, sed accumsan dui est vitae arcu. Duis ut sem efficitur, imperdiet diam ac, mattis nisi.</p>
<p>Aliquam quis orci tempor, iaculis quam at, commodo elit. Ut varius, diam vel finibus consectetur, tellus dolor cursus nisi, vel pulvinar nisl massa eu urna. Quisque pharetra rhoncus mauris, in pulvinar libero suscipit et. Proin interdum sodales elit,
  eget feugiat erat venenatis a. In sit amet urna sem. Maecenas vitae metus sed augue consequat auctor. Nam mollis nunc at metus consequat, non faucibus purus tempus. Morbi non aliquam lorem. Mauris vel lacus viverra odio fermentum efficitur lacinia eget
  ante. In ultrices, tellus eu rhoncus accumsan, lacus nisi rutrum leo, eget aliquam nisi nibh nec tellus. Pellentesque pretium et purus sit amet sodales. Curabitur varius eros magna, ac porttitor nibh molestie sit amet. Duis eleifend neque quis ultricies
  volutpat. Nulla sem sem, tempor eget commodo at, cursus sed sem. Proin vitae eleifend purus. Aliquam sed rhoncus elit.</p>
<p>Nam hendrerit sapien eget lectus auctor ornare. Quisque commodo metus vel ligula pellentesque, eu tempor dolor porta. Nunc sodales sollicitudin lectus, vitae venenatis lacus faucibus ac. In a faucibus tortor, eu ultricies tellus. Donec ullamcorper eros
  consequat, maximus urna eget, dictum est. Integer quis dui at augue rhoncus convallis. Nunc eget iaculis mauris. Sed quis ultricies nisi. Integer posuere porttitor iaculis. Sed bibendum vestibulum vehicula. Vivamus imperdiet orci sit amet sollicitudin
  efficitur. Donec porttitor mattis molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi egestas mi ac nisi blandit, sed ultrices nisl suscipit.</p>
<p>Phasellus eleifend id dolor accumsan tincidunt. Nam lobortis eros in porttitor elementum. Phasellus congue euismod quam in condimentum. Integer arcu metus, consectetur et quam in, tempor laoreet erat. Donec rhoncus iaculis dui vel placerat. Curabitur
  pellentesque venenatis leo, id gravida ipsum viverra ut. Nam dui justo, elementum id leo ut, porttitor vehicula velit. Curabitur bibendum, mauris a imperdiet molestie, urna libero tempus nisl, eget dapibus tortor lacus ac ligula. Phasellus vulputate
  ex nec ullamcorper cursus. Sed a lobortis enim, at condimentum sem. Praesent quis fringilla erat. Maecenas lacinia cursus faucibus. Phasellus vel arcu non nibh tincidunt hendrerit. Donec at eros pulvinar, porta mi a, faucibus sem. Duis sed pulvinar
  ante, vel interdum enim. Sed faucibus pulvinar tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend, neque quis porta venenatis, neque dui vulputate eros, non pellentesque lorem leo eu sem. Vivamus semper lectus sit amet ipsum fermentum tincidunt. Fusce sit amet nisi pulvinar, luctus
  nulla in, volutpat diam. Fusce sit amet nunc elit. Sed at lorem consectetur, convallis lectus et, placerat arcu. Ut eu magna quis arcu ultrices aliquam vel quis tortor. Morbi vel rutrum ligula, in laoreet sapien.</p>
<p>Nam ultrices dignissim sapien, eu euismod elit ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sem orci, rhoncus ac mi et, gravida tincidunt mi. Pellentesque ac iaculis urna, ut mollis enim. In eleifend mauris turpis, interdum
  ultricies mi interdum eleifend. Fusce tristique, elit nec ornare tempor, nibh nulla vehicula eros, sed accumsan dui est vitae arcu. Duis ut sem efficitur, imperdiet diam ac, mattis nisi.</p>
<p>Aliquam quis orci tempor, iaculis quam at, commodo elit. Ut varius, diam vel finibus consectetur, tellus dolor cursus nisi, vel pulvinar nisl massa eu urna. Quisque pharetra rhoncus mauris, in pulvinar libero suscipit et. Proin interdum sodales elit,
  eget feugiat erat venenatis a. In sit amet urna sem. Maecenas vitae metus sed augue consequat auctor. Nam mollis nunc at metus consequat, non faucibus purus tempus. Morbi non aliquam lorem. Mauris vel lacus viverra odio fermentum efficitur lacinia eget
  ante. In ultrices, tellus eu rhoncus accumsan, lacus nisi rutrum leo, eget aliquam nisi nibh nec tellus. Pellentesque pretium et purus sit amet sodales. Curabitur varius eros magna, ac porttitor nibh molestie sit amet. Duis eleifend neque quis ultricies
  volutpat. Nulla sem sem, tempor eget commodo at, cursus sed sem. Proin vitae eleifend purus. Aliquam sed rhoncus elit.</p>
<p>Nam hendrerit sapien eget lectus auctor ornare. Quisque commodo metus vel ligula pellentesque, eu tempor dolor porta. Nunc sodales sollicitudin lectus, vitae venenatis lacus faucibus ac. In a faucibus tortor, eu ultricies tellus. Donec ullamcorper eros
  consequat, maximus urna eget, dictum est. Integer quis dui at augue rhoncus convallis. Nunc eget iaculis mauris. Sed quis ultricies nisi. Integer posuere porttitor iaculis. Sed bibendum vestibulum vehicula. Vivamus imperdiet orci sit amet sollicitudin
  efficitur. Donec porttitor mattis molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi egestas mi ac nisi blandit, sed ultrices nisl suscipit.</p>
<p>Phasellus eleifend id dolor accumsan tincidunt. Nam lobortis eros in porttitor elementum. Phasellus congue euismod quam in condimentum. Integer arcu metus, consectetur et quam in, tempor laoreet erat. Donec rhoncus iaculis dui vel placerat. Curabitur
  pellentesque venenatis leo, id gravida ipsum viverra ut. Nam dui justo, elementum id leo ut, porttitor vehicula velit. Curabitur bibendum, mauris a imperdiet molestie, urna libero tempus nisl, eget dapibus tortor lacus ac ligula. Phasellus vulputate
  ex nec ullamcorper cursus. Sed a lobortis enim, at condimentum sem. Praesent quis fringilla erat. Maecenas lacinia cursus faucibus. Phasellus vel arcu non nibh tincidunt hendrerit. Donec at eros pulvinar, porta mi a, faucibus sem. Duis sed pulvinar
  ante, vel interdum enim. Sed faucibus pulvinar tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend, neque quis porta venenatis, neque dui vulputate eros, non pellentesque lorem leo eu sem. Vivamus semper lectus sit amet ipsum fermentum tincidunt. Fusce sit amet nisi pulvinar, luctus
  nulla in, volutpat diam. Fusce sit amet nunc elit. Sed at lorem consectetur, convallis lectus et, placerat arcu. Ut eu magna quis arcu ultrices aliquam vel quis tortor. Morbi vel rutrum ligula, in laoreet sapien.</p>
<p>Nam ultrices dignissim sapien, eu euismod elit ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sem orci, rhoncus ac mi et, gravida tincidunt mi. Pellentesque ac iaculis urna, ut mollis enim. In eleifend mauris turpis, interdum
  ultricies mi interdum eleifend. Fusce tristique, elit nec ornare tempor, nibh nulla vehicula eros, sed accumsan dui est vitae arcu. Duis ut sem efficitur, imperdiet diam ac, mattis nisi.</p>
<p>Aliquam quis orci tempor, iaculis quam at, commodo elit. Ut varius, diam vel finibus consectetur, tellus dolor cursus nisi, vel pulvinar nisl massa eu urna. Quisque pharetra rhoncus mauris, in pulvinar libero suscipit et. Proin interdum sodales elit,
  eget feugiat erat venenatis a. In sit amet urna sem. Maecenas vitae metus sed augue consequat auctor. Nam mollis nunc at metus consequat, non faucibus purus tempus. Morbi non aliquam lorem. Mauris vel lacus viverra odio fermentum efficitur lacinia eget
  ante. In ultrices, tellus eu rhoncus accumsan, lacus nisi rutrum leo, eget aliquam nisi nibh nec tellus. Pellentesque pretium et purus sit amet sodales. Curabitur varius eros magna, ac porttitor nibh molestie sit amet. Duis eleifend neque quis ultricies
  volutpat. Nulla sem sem, tempor eget commodo at, cursus sed sem. Proin vitae eleifend purus. Aliquam sed rhoncus elit.</p>
<p>Nam hendrerit sapien eget lectus auctor ornare. Quisque commodo metus vel ligula pellentesque, eu tempor dolor porta. Nunc sodales sollicitudin lectus, vitae venenatis lacus faucibus ac. In a faucibus tortor, eu ultricies tellus. Donec ullamcorper eros
  consequat, maximus urna eget, dictum est. Integer quis dui at augue rhoncus convallis. Nunc eget iaculis mauris. Sed quis ultricies nisi. Integer posuere porttitor iaculis. Sed bibendum vestibulum vehicula. Vivamus imperdiet orci sit amet sollicitudin
  efficitur. Donec porttitor mattis molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi egestas mi ac nisi blandit, sed ultrices nisl suscipit.</p>
<p>Phasellus eleifend id dolor accumsan tincidunt. Nam lobortis eros in porttitor elementum. Phasellus congue euismod quam in condimentum. Integer arcu metus, consectetur et quam in, tempor laoreet erat. Donec rhoncus iaculis dui vel placerat. Curabitur
  pellentesque venenatis leo, id gravida ipsum viverra ut. Nam dui justo, elementum id leo ut, porttitor vehicula velit. Curabitur bibendum, mauris a imperdiet molestie, urna libero tempus nisl, eget dapibus tortor lacus ac ligula. Phasellus vulputate
  ex nec ullamcorper cursus. Sed a lobortis enim, at condimentum sem. Praesent quis fringilla erat. Maecenas lacinia cursus faucibus. Phasellus vel arcu non nibh tincidunt hendrerit. Donec at eros pulvinar, porta mi a, faucibus sem. Duis sed pulvinar
  ante, vel interdum enim. Sed faucibus pulvinar tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend, neque quis porta venenatis, neque dui vulputate eros, non pellentesque lorem leo eu sem. Vivamus semper lectus sit amet ipsum fermentum tincidunt. Fusce sit amet nisi pulvinar, luctus
  nulla in, volutpat diam. Fusce sit amet nunc elit. Sed at lorem consectetur, convallis lectus et, placerat arcu. Ut eu magna quis arcu ultrices aliquam vel quis tortor. Morbi vel rutrum ligula, in laoreet sapien.</p>
<p>Nam ultrices dignissim sapien, eu euismod elit ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sem orci, rhoncus ac mi et, gravida tincidunt mi. Pellentesque ac iaculis urna, ut mollis enim. In eleifend mauris turpis, interdum
  ultricies mi interdum eleifend. Fusce tristique, elit nec ornare tempor, nibh nulla vehicula eros, sed accumsan dui est vitae arcu. Duis ut sem efficitur, imperdiet diam ac, mattis nisi.</p>
<p>Aliquam quis orci tempor, iaculis quam at, commodo elit. Ut varius, diam vel finibus consectetur, tellus dolor cursus nisi, vel pulvinar nisl massa eu urna. Quisque pharetra rhoncus mauris, in pulvinar libero suscipit et. Proin interdum sodales elit,
  eget feugiat erat venenatis a. In sit amet urna sem. Maecenas vitae metus sed augue consequat auctor. Nam mollis nunc at metus consequat, non faucibus purus tempus. Morbi non aliquam lorem. Mauris vel lacus viverra odio fermentum efficitur lacinia eget
  ante. In ultrices, tellus eu rhoncus accumsan, lacus nisi rutrum leo, eget aliquam nisi nibh nec tellus. Pellentesque pretium et purus sit amet sodales. Curabitur varius eros magna, ac porttitor nibh molestie sit amet. Duis eleifend neque quis ultricies
  volutpat. Nulla sem sem, tempor eget commodo at, cursus sed sem. Proin vitae eleifend purus. Aliquam sed rhoncus elit.</p>
<p>Nam hendrerit sapien eget lectus auctor ornare. Quisque commodo metus vel ligula pellentesque, eu tempor dolor porta. Nunc sodales sollicitudin lectus, vitae venenatis lacus faucibus ac. In a faucibus tortor, eu ultricies tellus. Donec ullamcorper eros
  consequat, maximus urna eget, dictum est. Integer quis dui at augue rhoncus convallis. Nunc eget iaculis mauris. Sed quis ultricies nisi. Integer posuere porttitor iaculis. Sed bibendum vestibulum vehicula. Vivamus imperdiet orci sit amet sollicitudin
  efficitur. Donec porttitor mattis molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi egestas mi ac nisi blandit, sed ultrices nisl suscipit.</p>
<p>Phasellus eleifend id dolor accumsan tincidunt. Nam lobortis eros in porttitor elementum. Phasellus congue euismod quam in condimentum. Integer arcu metus, consectetur et quam in, tempor laoreet erat. Donec rhoncus iaculis dui vel placerat. Curabitur
  pellentesque venenatis leo, id gravida ipsum viverra ut. Nam dui justo, elementum id leo ut, porttitor vehicula velit. Curabitur bibendum, mauris a imperdiet molestie, urna libero tempus nisl, eget dapibus tortor lacus ac ligula. Phasellus vulputate
  ex nec ullamcorper cursus. Sed a lobortis enim, at condimentum sem. Praesent quis fringilla erat. Maecenas lacinia cursus faucibus. Phasellus vel arcu non nibh tincidunt hendrerit. Donec at eros pulvinar, porta mi a, faucibus sem. Duis sed pulvinar
  ante, vel interdum enim. Sed faucibus pulvinar tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend, neque quis porta venenatis, neque dui vulputate eros, non pellentesque lorem leo eu sem. Vivamus semper lectus sit amet ipsum fermentum tincidunt. Fusce sit amet nisi pulvinar, luctus
  nulla in, volutpat diam. Fusce sit amet nunc elit. Sed at lorem consectetur, convallis lectus et, placerat arcu. Ut eu magna quis arcu ultrices aliquam vel quis tortor. Morbi vel rutrum ligula, in laoreet sapien.</p>
<p>Nam ultrices dignissim sapien, eu euismod elit ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sem orci, rhoncus ac mi et, gravida tincidunt mi. Pellentesque ac iaculis urna, ut mollis enim. In eleifend mauris turpis, interdum
  ultricies mi interdum eleifend. Fusce tristique, elit nec ornare tempor, nibh nulla vehicula eros, sed accumsan dui est vitae arcu. Duis ut sem efficitur, imperdiet diam ac, mattis nisi.</p>
<p>Aliquam quis orci tempor, iaculis quam at, commodo elit. Ut varius, diam vel finibus consectetur, tellus dolor cursus nisi, vel pulvinar nisl massa eu urna. Quisque pharetra rhoncus mauris, in pulvinar libero suscipit et. Proin interdum sodales elit,
  eget feugiat erat venenatis a. In sit amet urna sem. Maecenas vitae metus sed augue consequat auctor. Nam mollis nunc at metus consequat, non faucibus purus tempus. Morbi non aliquam lorem. Mauris vel lacus viverra odio fermentum efficitur lacinia eget
  ante. In ultrices, tellus eu rhoncus accumsan, lacus nisi rutrum leo, eget aliquam nisi nibh nec tellus. Pellentesque pretium et purus sit amet sodales. Curabitur varius eros magna, ac porttitor nibh molestie sit amet. Duis eleifend neque quis ultricies
  volutpat. Nulla sem sem, tempor eget commodo at, cursus sed sem. Proin vitae eleifend purus. Aliquam sed rhoncus elit.</p>
<p>Nam hendrerit sapien eget lectus auctor ornare. Quisque commodo metus vel ligula pellentesque, eu tempor dolor porta. Nunc sodales sollicitudin lectus, vitae venenatis lacus faucibus ac. In a faucibus tortor, eu ultricies tellus. Donec ullamcorper eros
  consequat, maximus urna eget, dictum est. Integer quis dui at augue rhoncus convallis. Nunc eget iaculis mauris. Sed quis ultricies nisi. Integer posuere porttitor iaculis. Sed bibendum vestibulum vehicula. Vivamus imperdiet orci sit amet sollicitudin
  efficitur. Donec porttitor mattis molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi egestas mi ac nisi blandit, sed ultrices nisl suscipit.</p>
<p>Phasellus eleifend id dolor accumsan tincidunt. Nam lobortis eros in porttitor elementum. Phasellus congue euismod quam in condimentum. Integer arcu metus, consectetur et quam in, tempor laoreet erat. Donec rhoncus iaculis dui vel placerat. Curabitur
  pellentesque venenatis leo, id gravida ipsum viverra ut. Nam dui justo, elementum id leo ut, porttitor vehicula velit. Curabitur bibendum, mauris a imperdiet molestie, urna libero tempus nisl, eget dapibus tortor lacus ac ligula. Phasellus vulputate
  ex nec ullamcorper cursus. Sed a lobortis enim, at condimentum sem. Praesent quis fringilla erat. Maecenas lacinia cursus faucibus. Phasellus vel arcu non nibh tincidunt hendrerit. Donec at eros pulvinar, porta mi a, faucibus sem. Duis sed pulvinar
  ante, vel interdum enim. Sed faucibus pulvinar tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend, neque quis porta venenatis, neque dui vulputate eros, non pellentesque lorem leo eu sem. Vivamus semper lectus sit amet ipsum fermentum tincidunt. Fusce sit amet nisi pulvinar, luctus
  nulla in, volutpat diam. Fusce sit amet nunc elit. Sed at lorem consectetur, convallis lectus et, placerat arcu. Ut eu magna quis arcu ultrices aliquam vel quis tortor. Morbi vel rutrum ligula, in laoreet sapien.</p>
<p>Nam ultrices dignissim sapien, eu euismod elit ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sem orci, rhoncus ac mi et, gravida tincidunt mi. Pellentesque ac iaculis urna, ut mollis enim. In eleifend mauris turpis, interdum
  ultricies mi interdum eleifend. Fusce tristique, elit nec ornare tempor, nibh nulla vehicula eros, sed accumsan dui est vitae arcu. Duis ut sem efficitur, imperdiet diam ac, mattis nisi.</p>
<p>Aliquam quis orci tempor, iaculis quam at, commodo elit. Ut varius, diam vel finibus consectetur, tellus dolor cursus nisi, vel pulvinar nisl massa eu urna. Quisque pharetra rhoncus mauris, in pulvinar libero suscipit et. Proin interdum sodales elit,
  eget feugiat erat venenatis a. In sit amet urna sem. Maecenas vitae metus sed augue consequat auctor. Nam mollis nunc at metus consequat, non faucibus purus tempus. Morbi non aliquam lorem. Mauris vel lacus viverra odio fermentum efficitur lacinia eget
  ante. In ultrices, tellus eu rhoncus accumsan, lacus nisi rutrum leo, eget aliquam nisi nibh nec tellus. Pellentesque pretium et purus sit amet sodales. Curabitur varius eros magna, ac porttitor nibh molestie sit amet. Duis eleifend neque quis ultricies
  volutpat. Nulla sem sem, tempor eget commodo at, cursus sed sem. Proin vitae eleifend purus. Aliquam sed rhoncus elit.</p>
<p>Nam hendrerit sapien eget lectus auctor ornare. Quisque commodo metus vel ligula pellentesque, eu tempor dolor porta. Nunc sodales sollicitudin lectus, vitae venenatis lacus faucibus ac. In a faucibus tortor, eu ultricies tellus. Donec ullamcorper eros
  consequat, maximus urna eget, dictum est. Integer quis dui at augue rhoncus convallis. Nunc eget iaculis mauris. Sed quis ultricies nisi. Integer posuere porttitor iaculis. Sed bibendum vestibulum vehicula. Vivamus imperdiet orci sit amet sollicitudin
  efficitur. Donec porttitor mattis molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi egestas mi ac nisi blandit, sed ultrices nisl suscipit.</p>
<p>Phasellus eleifend id dolor accumsan tincidunt. Nam lobortis eros in porttitor elementum. Phasellus congue euismod quam in condimentum. Integer arcu metus, consectetur et quam in, tempor laoreet erat. Donec rhoncus iaculis dui vel placerat. Curabitur
  pellentesque venenatis leo, id gravida ipsum viverra ut. Nam dui justo, elementum id leo ut, porttitor vehicula velit. Curabitur bibendum, mauris a imperdiet molestie, urna libero tempus nisl, eget dapibus tortor lacus ac ligula. Phasellus vulputate
  ex nec ullamcorper cursus. Sed a lobortis enim, at condimentum sem. Praesent quis fringilla erat. Maecenas lacinia cursus faucibus. Phasellus vel arcu non nibh tincidunt hendrerit. Donec at eros pulvinar, porta mi a, faucibus sem. Duis sed pulvinar
  ante, vel interdum enim. Sed faucibus pulvinar tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend, neque quis porta venenatis, neque dui vulputate eros, non pellentesque lorem leo eu sem. Vivamus semper lectus sit amet ipsum fermentum tincidunt. Fusce sit amet nisi pulvinar, luctus
  nulla in, volutpat diam. Fusce sit amet nunc elit. Sed at lorem consectetur, convallis lectus et, placerat arcu. Ut eu magna quis arcu ultrices aliquam vel quis tortor. Morbi vel rutrum ligula, in laoreet sapien.</p>
ctor ornare. Quisque commodo metus vel ligula pellentesque, eu tempor dolor porta. Nunc sodales sollicitudin lectus, vitae venenatis lacus faucibus ac. In a faucibus tortor, eu ultricies tellus. Donec ullamcorper eros
  consequat, maximus urna eget, dictum est. Integer quis dui at augue rhoncus convallis. Nunc eget iaculis mauris. Sed quis ultricies nisi. Integer posuere porttitor iaculis. Sed bibendum vestibulum vehicula. Vivamus imperdiet orci sit amet sollicitudin
  efficitur. Donec porttitor mattis molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi egestas mi ac nisi blandit, sed ultrices nisl suscipit.</p>

JS Fiddle

Answer 1

http://jsfiddle.net/r051Ls8g/2/

我删除了你的CSS第118行的overflow: scroll;。我还必须将overflow: scroll;添加到您的身体css

打开复选框时隐藏滚动条父页面

1 个答案: