webkit css滚动条样式

有没有办法完全摆脱滚动轨道？还是让它覆盖内容而不是将其推到一边？比如iOS/狮子滚动条

下面的内容非常接近，但即使轨迹是透明的，可滚动区域的内容也会被覆盖，页面背景也会显示出来

::-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;
}

---

嗯，我想我以前回答过这个问题，也许不是：

• 在主体上隐藏溢出
• 用div包装网站的全部内容或任何你正在滚动的内容
• 将css属性包含在 div（溢出：滚动或溢出-y：滚动）

现在可以使用rgba（0,0,0,0.3）将轨迹css设置为任何不透明度，因为滚动不是主体的一部分

如果您想进行实验，定制firefox滚动条的另一个技巧是：

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

它会给firefox的滚动条增加一点颜色/纹理。（为了便于比较，最好将滚动条向右移动）

---

我还没有尝试过它，但它可以

为什么不使用自定义滚动条，比如基于jQuery的滚动条呢？如果你想的话，你可以把它设计成覆盖内容的样式。我尝试过jScrollPane，也尝试过使用css3翻译、css位置等我自己的一些解决方案。。。没有一个比实际的滚动条快。对于已经内置到浏览器中的东西来说，这似乎是一个很大的额外开销。如果可以使用现有的滚动条而不是一些伪javascript，这似乎是一个更好的主意。我发现它工作得很好，而且速度很快（就滚动内容的响应而言），并且非常容易设置。无论滚动条出现在哪里，你都可以将边距设置为-8px。虽然这更像是一种黑客方式，但它应该会让你走。我不确定我是否理解你的意思。请查看此链接：。我想做的是让红色的段落一直向右，蓝色的卷轴拇指在上面浮动。如果我能把蓝色卷轴的拇指也从边缘拉开一点，那就更好了。