html - Two vertical scrollbars on Android [pendant]

Navigation
0

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

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 a however, my screen is MaxVision, and many values have become unmatched with my screen one of them is the dpi.

In StackOverflow I saw a related question, but on my screen it did not work.

Here's the 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>

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

The error should 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);
}

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

    
asked by anonymous 31.12.2018 / 21:02

1 answer

1

I simulated the same problem, in which I got two scrollbars

The solution is:

Use NiceScroll

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

Here is an example code for you to have a north: 

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

    });

    </script>

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

After putting to work NiceScroll it will still be giving you the error that you are having

The solution is to put in all your CSS, both the main (Style) and the responsive (Case Tiver) 

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

So, only Nicescroll will be displayed, no longer appearing the default

    
05.01.2019 / 12:55
Capture cookie set What SCRIPT in Postgres to list all Schemas?