Question

我有一个带有CSS属性overflow: auto的容器。我知道如何为滚动条添加样式，但我不明白我的能力：

1）从容器的右边框移动滚动条至少5个像素。

2）滚动条 - 拇指部分应该是滚动条轨道部分。

＆＃34; SCSS＆＃34;中的示例代码：

#msg-console {
    height: 48rem;
    width: 100%;
    background: #04aaf8;
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    &::-webkit-scrollbar {
        width: 1rem;
    }

    &::-webkit-scrollbar-track {
        border-radius: 1rem;
        background: rgba(74, 49, 106, 0.9);
        width: 0.5rem;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 1rem;
        background: #fff;
        width: 0.3rem;
    }
}

有人可以帮帮我吗？我只寻找CSS解决方案。

Answer 1

所以对我来说，我找到了简单而有效的解决方案。我刚添加了额外的内部div。样式：

#msg-console {
    height: 48rem;
    width: 100%;
    background: #04aaf8;
    display: flex;
    flex-direction: column;

    .msg-container{
                height: 48rem;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                width: 99%;
                box-sizing: border-box;
                padding: 0 0.5rem;

                 &::-webkit-scrollbar {
                     width: 1rem;
                }

                 &::-webkit-scrollbar-track {
                     border-radius: 1rem;
                     background: rgba(74, 49, 106, 0.9);
                     width: 0.5rem;
                 }

                &::-webkit-scrollbar-thumb {
                    border-radius: 1rem;
                    background: #fff;
                    width: 0.3rem;
                }
   }
}

HTML：

<div id="msg-console>
     <div class="msg-container"><div>
</div>

CSS滚动条样式难题

1 个答案: