html - Two vertical scrollbars on Android

Asked

Viewed 78 times

0

Chrome’s standard Custom Scrollbars and scrollbar are in conflict due to height:100vh. But I think Chrome detects how to 100vh is equivalent to the number of Y pixels of Android, and not that of Webview.

Anyway, I want the site to stay on 100% of the Chrome Canary screen, thus removing the default scrollbar as in the photo [1].

But there is one however, my screen is Maxvision, and many values have become unreachable with my screen one of them is dpi.

At Stackoverflow I saw a related question, but on my screen did not work.

Here is the HTML code

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

In the code above, I made the content of the page bigger than my screen.

The mistake must be here:

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

I just want a way to get the horizontal scrollbar inside the screen

html android css html5

  • It’s like you put up a print?

  • Wait a minute, but I think it’s gonna get a little hard to see.

  • All right now @Sam

  • You tried to trade 100vh for 100% to see if it solves? and this Calc(100vh - 50px) pq did this??

  • I just did a test, and it didn’t work either, but it got smaller. And the better the compatibility the better.

  • From what I understand, you’re referring to that standard invisible bar that only appears when scrolling, it’s not?

  • Exact (unfortunately the commentary should be higher)

  • Dude, I don’t know if you’re interested in this option, but this jQuery plugin is really cool and super customizable and crossbrowser. It removes the original scrollbar from the browser, and makes another one with javascript, works great! In your car it will remove all scrollbars and you will build a new one with this https://nicescroll.areaaperta.com plugin/

  • Testing here in Bluestacks this bar does not appear, only red.

  • Okay, if you can get through the code and the exit is the same

  • It seems to me that even this Nicescroll has the same problem, take a look at their scrollbar

  • Dear Edu, in the title you say one thing and in the question you say another, after all what do you want? The problem is that there are 2 scrollbars, do you want just one? Or is it the other way around? Is it a spacing problem? Please edit your question to make it clear so we can help you.

  • I want you to remove the standard Scrollbar, and the problem has to do with the height, because the horizontal scroller is below the page that would be 100vh. as you can see, there is a horizontal scrollbar below the page that due to the standard scroller and the width, it does not appear mild that scroll 2 or 3 times on Android

  • Calmly edu, apart from all the part you have already explained, answer to what I asked exactly, if it is not difficult to help, do you want or not 2 scrollbars? Whether they are customized or not;

  • No, I just want the modified ones, sorry for the delay

  • You can take the scrollbar out of your browser , and use nicescroll http://www.lucianosimas.com.br/blog/tirar-barra-de-scroll-do-navigator/ https://nicescroll.areaaperta.com/how-to-use/ I think it would work, or just take it out of mobile using css media queries

Show 11 more comments

1 answer

1


I simulated the same problem, in which I had two scroll bars

The solution is :

Use the Nicescroll

and make the scroll desired, it is very simple to use, and is not heavy.

Here’s an example code for you to have a north : 

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

    });

    </script>

This code will make your scroll coral and the horizontal scroll will not appear.

After running the Nicescroll it will still be giving the error you are having

the solution is to put in all your CSS, both in the main (Style) and in the responsive (If You Have)

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

Thus, will only be displayed the Nicescroll, no longer appearing the pattern

inserir a descrição da imagem aqui

Browser other questions tagged html android css html5

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