如何使垂直滚动条变薄并消除右下空白？

Question

下面有一个带有垂直和水平滚动条的pre标签。如何使垂直滚动条变薄（如水平滚动条）并消除右下空白（使其像背景一样呈灰色）？

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

更有可能的是它可以使用 CSS 样式来修复。

Answer 1

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

你曾经在哪里

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

我添加了高度

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

我还为角颜色添加了以下 CSS

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

添加：

至于圆角，将其包裹在div中，然后进行溢出隐藏。

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

调整宽度和高度以包括滚动条的宽度/高度。我个人会避免做这样的事情，除非你可以在包括不同操作系统和浏览器的所有东西上进行测试。

Answer 2

   /* 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;
   }