Horizontal scrollbar being rolled by vertical scrollbar

Asked

Viewed 31 times

2

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

I read a lot about it, but I didn’t get results for the mobile device, and since I don’t have a pc, I use Web Aide to program.

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

It looks like h spam, 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 on the project, it is basically this way:

[Beginning]

Imagem da primeira parte da execução projeto

[End]

Imagem da segunda parte da execução projeto

html css html5

  • Face your doubt is not very clear, your problem is this horizontal scroll that should not appear the bar since it is a letter below the other? What’s really your problem?

  • No, it should appear, but it falls below the letters.

1 answer

1


I believe your problem is that you didn’t set a certain height on html and body, I used height: 100vh; in this exepmplo, it may 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>

  • 1

    The problem is that on Android, when you remove any of them, the scrollbar doesn’t appear. I just tried

  • 1

    @Eduardoprocópiogomez I made an edition putting a determined height of 100vh in HTML and Body, test there to see if with the declared value works as you expect

  • 2

    Thanks!! I think I’ve learned the basics of stack overflow

  • 1

    @Eduardoprociogomez is using what we learn, your question was well asked, only with text it is difficult to pass some ideas, so we have to work on the details, but you are in the way. Abs and good end of year!

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.