时间戳

首页 > 解决方案 > 如何让垂直滚动条变细，摆脱右下空白？

html - 如何让垂直滚动条变细，摆脱右下空白？

问题描述

下面有一个带有垂直和水平滚动条的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 样式来修复。

标签： htmlcss

解决方案

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

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

推荐阅读