10

有没有办法完全摆脱滚动轨道？还是让它覆盖内容而不是将其推到一边？喜欢 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;
}
4

1 回答 1

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 上使其半透明。

它会给火狐滚动一点颜色/纹理。（为了比较，强制向右滚动可能是理想的）

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

于 2012-03-24T16:43:05.997 回答