Scrollbar horizontal being scrolled by vertical scrollbar [pendant]

Navigation
3

I'm doing a little test with the Chrome Canary 74 scrollbar on Android.

I read a lot about it, but I did not get results for the mobile device, and since I do not have a pc, I use Aide Web to program it.

In my project, there are only two files, one css and the other html.

It looks like spam from h, but it's not: 

<!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>

CSS: 

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

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

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

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #f00;
}

::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #000; 
}
body {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
    width:100%;
}

html,body {
    overflow-x: scroll;
    overflow-y: scroll;
}

When I give a RUN in the project, it basically looks like this:

[Top]

[End]

    
asked by anonymous 31.12.2018 / 18:59

1 answer

1

I think your problem is that you did not set a given height in html and body , I used height: 100vh; in that exepmplo, this might leave the bar in the expected place. 

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

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

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

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #f00;
}

::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #000; 
}
body {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
    width:100%;
}

html,body {
    overflow-x: scroll;
    overflow-y: scroll;
    height: 100vh;
}
<!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>
    
31.12.2018 / 19:18
preg_match_all to find text between strings Java Spring Boot project version