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 滚动的任何内容，
• 包括 css 属性
  div（溢出：滚动或溢出-y：滚动）。

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

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

• 执行溢出操作并使用您喜欢的任何颜色的透明 div 覆盖滚动条（通过 z-index），
• 将 div 放置在整个滚动部分上（可能是像position:absolute; right:0;如果你使用整个窗口的滚动）
• 使用pointer-events: none;在 div css 上使其半透明。

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

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