Clever Geek Handbook

How can I create a small square space between vertical scrollbars and horizontal scrollbars?

Please refer to the images below.

enter image description here enter image description here

When both vertical and horizontal scroll bars are encountered, a square of space is created. This happens not only in the browser window, but also in the internal elements that have overflow.

In my current project, the color of the space creates an unintentional heavy contrast that grabs the user's attention. How can I create a style so that it can be the same color as my background, or even better, "transparent"?

+3


source to share


2 answers


If you can try this css code



  ::-webkit-scrollbar
    {
        width:0px;
    }
    ::-webkit-scrollbar-track-piece
    {
        background-coor:transparent;
    }
+1


source


I'm a little late to the party, but if anyone else stumbles upon this ...

This particular part actually has its own class:



::-webkit-scrollbar-corner

If you set the background color to transparent, angular will be empty. A better solution might be to set it to the same background color as in :: - webkit-scrollbar to smoothly transition between the two scrollbars.

+1


source






More articles:


All Articles