Scrollbar 自定义webkit滚动条位置

我有一个自定义webkit滚动条，如下所示：

::-webkit-scrollbar{
  background: transparent;
  width: 10px;
}
::-webkit-scrollbar-thumb{
  background: #999 !important;
}

因此，它会呈现一个灰色的自定义滚动条，而不是标准滚动条。但是，它会粘在页面的右侧。我知道我可以通过在身体上添加边距、填充或边框来改变这一点，但我使用的是全屏（背景）图像。所以，当我尝试这一点时，所有的图像都会受到影响，这是我不想要的。因此，我试图定位滚动条，但这不起作用（因为它不是一个元素，而是一个用户代理属性

因此，我正在寻找一种方法（不使用其他插件）来定制工具栏，使其从侧面偏移

或者，如果可能的话，我可以在div中设置滚动条偏移量

其次，我正在寻找一种方法，我可以使滚动条的“轨迹”透明。所以只有一个手柄

---

提前感谢！

控制自定义滚动条位置的简单方法是使用确定的定位设置滚动元素（主体？）。您还需要将html设置为overflow:auto

要使拇指透明，请使用RGBa值来声明颜色。在本例中，我使用了0,0,0.4（红色、绿色、蓝色、alpha）。RGBa不是每个浏览器都支持的，Chris Coyier在这里有一个很好的支持它的人表：

如果您想显示的是拇指，也可以考虑隐藏滚动条的其他元素：<强> Rsisis，<强>滚动条按钮< /强>，和<强>滚动条角< /强> ./P>

html {
    overflow: auto;
}
body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 5px;
    right: 20px;
    overflow: scroll;
}
::-webkit-scrollbar{
    background: transparent;
    width: 10px;
}
::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }

---

如果您仍在寻找答案（或者其他人，像我一样），请查看位于

的工作演示，这里是一个确定的答案。
回答您的第一个问题-我建议您将所有可滚动内容放在一个100%高、90%宽的div中-右侧左侧的10%将是您的偏移量。如下所示：

.superDiv{
  height:100%;
  width:90%;
  position:fixed;
}
body{ overflow: hidden }

第二个问题-您正在寻找

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

---

但是，由于苹果公司的人正在推动不使用滚动条浏览网页，只有CSS设置的属性可见，因此您不必更改轨迹块。

我最近发现的聪明解决方案是将边框放在包含滚动条的屏幕/div的右侧：

<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>

右边框：5px纯色（背景色）；