How to make vertical scrollbar thinner and get rid of the right-bottom empty space?

user_502332 0
Viewed 11236

Below there is a pre tag that has vertical and horizontal scrollbars. How to make the vertical scrollbar thinner(like the horizontal one) and to get rid of the right-bottom empty space(make it gray color like the background)?

enter image description here

 :root {
        --code-color: darkred;
        --code-bg-color: #f6f6f6;
        --code-font-size: 14px;
        --code-line-height: 1.4;
        --scroll-bar-color: #c5c5c5;
        --scroll-bar-bg-color: #f6f6f6;
    }

    pre {
        color: var(--code-color);
        font-size: var(--code-font-size);
        line-height: var(--code-line-height);
        background-color: var(--code-bg-color);
    }

    .code-block {
        max-height: 100px;
        overflow: auto;
        padding: 8px 7px 5px 15px;
        margin: 0px 0px 0px 0px;
        border-radius: 7px;
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
    }

    /* Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 12px;
    }

    *::-webkit-scrollbar-track {
        background: var(--scroll-bar-bg-color);
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--scroll-bar-color);
        border-radius: 20px;
        border: 3px solid var(--scroll-bar-bg-color);
    }
<div style="width:300px; height:100px">
    <pre class="code-block">SOME TEXT LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    N
    G
    </code></pre></div>

More probabily it can be fixed using CSS styles.

css html
2 Answers

 :root {
        --code-color: darkred;
        --code-bg-color: #aaaaaa;
        --code-font-size: 14px;
        --code-line-height: 1.4;
        --scroll-bar-color: #c5c5c5;
        --scroll-bar-bg-color: #f6f6f6;
    }

    pre {
        color: var(--code-color);
        font-size: var(--code-font-size);
        line-height: var(--code-line-height);
        background-color: var(--code-bg-color);
    }

    .code-block {
        max-height: 100px;
        overflow: auto;
        padding: 8px 7px 5px 15px;
        margin: 0px 0px 0px 0px;
        border-radius: 7px;
    }

    ::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }

    * {
        scrollbar-width: thin;
        scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
    }

    /* Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    *::-webkit-scrollbar-track {
        background: var(--scroll-bar-bg-color);
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--scroll-bar-color);
        border-radius: 20px;
        border: 3px solid var(--scroll-bar-bg-color);
    }
<div style="width:300px; height:100px">
    <pre class="code-block">SOME TEXT LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    O
    N
    G
    </code></pre></div>

Where you had

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

I added the height

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

I also added the following CSS for corner colour

::-webkit-scrollbar-corner { 
       background: rgba(0,0,0,0.5); 
}

Added:

As for rounded corners wrap it in a div and then do overflow hidden.

<div style="width:300px; height:100px; border-radius:15px; overflow:hidden">
    // put your existing scrolling HTML here...
</div>

Fiddle with the width and height to include width/height of scrollbars. I personally would avoid messing about doing stuff like this unless you can test it on everything that includes different OS as well as browsers.

user_13675690 
   /* width */
    ::-webkit-scrollbar {
       width: 5px;
    }
  /* Track */
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
   }

  /* Handle */
   ::-webkit-scrollbar-thumb {
      background: #bec4c4;
   }

  /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
       background: #555;
   }
user_99566180
Related