html - 如何使垂直滚动条更薄并摆脱右下角的空白空间？

Question

下面有一个前 具有垂直和水平滚动条的标签。如何使垂直滚动条更薄(如水平滚动条)并摆脱右下 Angular 的空白空间(使其像背景一样灰色)？

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

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

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

添加:
至于圆 Angular ，将它包裹在一个 div 中，然后 overflow hidden 。

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

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