Effect appears without creating scrollbar

Question

Effect appears without creating scrollbar

Navigation

#1 by (3 votes)

0

Is it possible to create the effect below without the browser creating scroll bars? (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

asked by anonymous 29.08.2018 / 14:44

1 answer

___ ___ erkimt Take last array object [duplicate] ______ qstntxt ___

How can I always get the last object from the array at the moment I'm using the following function but only takes the first one.

%pre%

______ azszpr326152 ___

You can search for length using %code% less than 1 that will always return the last item

%pre%

___ Set query sql according to available discipline

score 3 · Accepted Answer

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

The overflow quer property specifies when the content of a block-level element should be cut, displayed with scrollbars, or overflows from 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