Html隐藏滚动条栏

Question

到目前为止，我有一个透明的bar。

{{3}}

但右边角有一个丑陋的白色矩形，我想透明。

我还想隐藏scrollbar的{​​{1}}，以便只有thumb可见且bar可见

• 仅在滚动时
• 从未

我更喜欢纯粹的Css解决方案，但如果不可行，js/jquery也可以。

的CSS：

.transparentScroll::-webkit-scrollbar {
    width: 12px;
}

.transparentScroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.transparentScroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: transparent;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

HTML

<div class="transparentScroll">
    <table>
        ...
    </table>
</div>