0

As Custom Scrollbars e a scrollbar padrão do Chrome estão em conflito, devido ao height:100vh. Mas acho que o Chrome detecta como se 100vh fosse equivalente ao numero de pixels Y do Android, e não o da WebView.

Enfim, eu quero que o site fique em 100% da tela do Chrome Canary, assim removendo a scrollbar padrão como na foto [1].

Mas há um porém, a minha tela é MaxVision, e muitos valores ficaram incomatíveis com a minha tela um deles é a dpi.

No StackOverflow eu vi uma pergunta relacionada, porém na minha tela não deu certo.

Eis o código HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="user-scalable=no,width=device-width">
    <link href="css/styles.css" rel="stylesheet">
  </head>
  <body>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
      h<br>
  </body>
</html>

No código acima, fiz com que o conteúdo da página fosse maior que a minha tela.

O erro deve estar aqui:

::-webkit-scrollbar {
    -webkit-appearance: none;
    margin:0;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(255, 0, 0);
}

::-webkit-scrollbar-track { 
    background-color: #000; 
}

::-webkit-scrollbar-button {
    background-color:#0f0;
    width:12px;
    height:12px;
}

}
body {
    position: relative;
    display: flex;
    flex-direction: column;
}

html,body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow-x: scroll;
    overflow-y: scroll;
    max-height:calc(100vh - 50px);
}

a scrollbar está em conflito

Só quero um jeito de ficar a scrollbar horizontal dentro da tela

16
  • Tem como vc colocar um print?
    – Meu ovo
    31/12/2018 às 20:12
  • Espere um minuto, mas acho que vai ficar meio difícil de ver.
    – EduApps
    31/12/2018 às 20:15
  • Tudo certo agora @Sam
    – EduApps
    31/12/2018 às 20:19
  • Vc tentou trocar 100vh por 100% para ver se resolve? e esse calc(100vh - 50px) pq fez isso??
    – hugocsl
    31/12/2018 às 20:21
  • Eu só fiz um teste, e também não deu certo, mas ficou menor. E quanto melhor a compatibilidade melhor.
    – EduApps
    31/12/2018 às 20:23

1 Resposta 1

1

Simulei o mesmo problema, na qual eu ficava com duas barras de scroll

A solução é :

Use o NiceScroll

e faça o scroll desejado, é bem simples de usar, e não é pesado.

Aqui vai um exemplo de código para você ter um norte :

 <script>
    $("body").niceScroll({
      cursorcolor:"coral",
      cursorwidth:"10px",
      cursorborder:"none",
      horizrailenabled:false

    });

    </script>

Este código deixará seu scroll em coral e não aparecerá o scroll horizontal.

Após colocar pra funcionar o NiceScroll ele ainda estará dando o erro que você está tendo

a solução é colocar em todos os seus CSS, tanto no principal (Style) como no responsivo(Caso Tiver)

body {
overflow-x: hidden;
overflow-y: hidden; }

Assim, só será exibido o Nicescroll, não aparecendo mais o padrão

inserir a descrição da imagem aqui

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .