Effect appear without creating scroll bar

Asked

Viewed 41 times

0

Is it possible to create the effect below without the browser creating scrollbars? (IE10 +)

function trocaEfeito(){
  document.querySelector('.efeito').classList.toggle('ativo')
}
*{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.conteudo{
  background: linear-gradient(to right, #000140, #0072BD);
}

.efeito{
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
  transition: transform .6s ease;
  background: linear-gradient(to right, #000000, #000140);
  display: flex;
  align-items: center;
  justify-content: center;
}

.efeito.ativo{
  transform: translateY(0);
}

button{
  height: 2rem;
  width: 4rem;
  margin: 2rem;
}
<html>
  <body>
    <div class='conteudo'>
      <button onclick='trocaEfeito()'>clique</button>
    </div>
    <div class='efeito'>
      <button onclick='trocaEfeito()'>fechar</button>
    </div>
  </body>
</html>

css3

1 answer

3


So you can use the property overflow in the body of your CSS code.

The estate overflow specifies when the content of a block level element must be cut, displayed with scrollbars, or overflows the element.

function trocaEfeito(){
  document.querySelector('.efeito').classList.toggle('ativo')
}
*{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.conteudo{
  background: linear-gradient(to right, #000140, #0072BD);
}

.efeito{
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
  transition: transform .6s ease;
  background: linear-gradient(to right, #000000, #000140);
}

.efeito.ativo{
  transform: translateY(0);
}

button{
  height: 2rem;
  width: 4rem;
  margin: 2rem;
}
<html>
  <body>
    <div class='conteudo'>
      <button onclick='trocaEfeito()'>clique</button>
    </div>
    <div class='efeito'>
      <button onclick='trocaEfeito()'>fechar</button>
    </div>
  </body>
</html>

Guides:

W3schools

MDN web Docs

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.