内容上的滚动条

Question

我想要制作一个透明的滚动条，应该放置在有内容的div上。 仅使用css和webkit浏览器。 它必须看起来像示例。这是我的代码。问题在于滚动条会将内容向左移动。如何使其看起来像示例中的那样？谢谢回复。

div{
  width:410px;
  height:100px;
  overflow-y:scroll;
  border:1px solid green;
  position:relative;
}

::-webkit-scrollbar{
  width:20px;
  position:absolute;
  right:20px;
  z-index:100;
} 

::-webkit-scrollbar-thumb{
  background-color:rgba(0,0,0,1);
  border-right:10px solid white;
}  

- Татьяна Ферулёва

---

你应该将代码包含在你的问题中，并提供一个 jsFiddle.net 片段的链接。 - akluth

你不能只用CSS和Webkit浏览器来实现这个！你应该使用javascript或jquery。 - mehdi

可能是自定义CSS滚动条适用于Firefox的重复问题。 - 99tharun

Answer 1

这与示例非常相似。

::-webkit-scrollbar{
    width:7px;
} 

::-webkit-scrollbar-thumb{
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    border: 1px solid #fff;
}

否则，您必须使用{{link1：iscroll插件}}

- Jose Luis