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);
}
Só quero um jeito de ficar a scrollbar horizontal dentro da tela