webkit css滚动条样式

Question

有没有办法完全摆脱滚动轨道？或者让它覆盖内容而不是将其推到一边？喜欢iOS/Lion滚动条？

以下内容非常接近,但即使轨道是透明的,也可以推动可滚动区域的内容并显示页面背景.

::-webkit-scrollbar {  
    width:8px;
    height:8px;
    -webkit-border-radius: 4px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
    background-color:transparent;
}

::-webkit-scrollbar-thumb {  
    background-color: rgba(053, 057, 071, 0.3);
    width: 6px;
    height: 6px;
    -webkit-border-radius:4px;
}

Answer 1

嗯，我以为我之前回答过这个问题，也许没有：

• 隐藏身体上的溢出
• 包裹网站的全部内容或您使用 div 滚动的任何内容，
• 包含 div 的 css 属性（overflow:scroll 或 Overflow-y:scroll）。

现在您可以使用 rgba(0,0,0,0.3) 将轨道 css 设置为任何不透明度，因为滚动不是正文的一部分。

如果您想尝试一下，自定义 Firefox 滚动条的另一个技巧是：

• 执行溢出操作并用您喜欢的任何颜色的透明 div 覆盖滚动条（通过 z-index），
• 将 div 放置在整个滚动部分上（可能类似于position:absolute; right:0; 如果您在整个窗口中使用滚动）
• 使用指针事件：无；在 div css 上使其半透明。

它会给 Firefox 滚动带来一点颜色/纹理。（为了可比性，强制滚动到右侧可能是理想的选择）

我还没有尝试过，但它是可行的