dev [CSS] Overflow invisivel, identico ao do Google Mobile.

[Pica-Pau]

Fala muchachos hoje eu vou ensinar pra vocês como fazer um overflow invisível, identico ao do Google.

Quando você entra em qualquer site feito pelo Google percebe que tem como você "puxar" qualquer elemento

para o lado sem que nenhum overflow esteja vísivel. Oque eu acho bem maneiro e eu vou ensinar pra vocês.

 

Recentemente eu fiz um site com um sistema de tabs dinamicos, derrepente me vi com o problema desses tabs quando houverem muitos elementos, ele quebrar. Então, eu simplesmente deixei o overflow invisível e depois deixei o width dele em 0.

 

Exemplo:

 

 

 

 

Segue o código:

* {

  overflow: auto;

}



*::-webkit-scrollbar {

  width: 0;

  height: 0;

}

Bom, ainda não terminou, se você usar isso em um computador ou laptop que precise do overflow para "funcionar", ele vai desaparecer já que eu coloquei o overflow invisível, e como o computador NÃO É TOUCH, não vai funcionar. Então nós adicionamos um media queries, somente para dispositivos móveis terem o overflow invisivel.

* {

  overflow: auto;

}





@media screen and (max-width: 991px) {



  *::-webkit-scrollbar {

    width: 0;

    height: 0;

  }



}

Bom, é somente isto, se quiserem mais tutoriais só me chamar no Skype, Discord, Shoutbox ou aqui nos comentários que eu farei sem problema algum. Até mais!

[Dokitos]

Muito bom, dá pra fazer altas coisas top com isso

[Jaoow]

Topp, valeu natan