scrollbar - 自定义 webkit 滚动条位置

Question

我有一个像这样的自定义 webkit 滚动条:

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

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

所以我正在寻找一种方法(不使用其他插件)来自定义工具栏，使其从侧面偏移。

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

其次，我正在寻找一种方法来制作滚动条透明的“轨道”。所以只有一个 Handlebars 。

提前致谢!

Answer 1

如果您仍在寻找答案(或者其他人，就像我一样)-这里是权威 article about webkit scrollbars .
回答您的第一个问题 - 我建议您将所有可滚动内容放在 100% 高度和 90% 宽度的 div 中 - 右侧 10% 将是您的偏移量。像那样:

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

第二个问题——你要找的

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

但由于苹果人正在插入无滚动条的网页浏览，只有 CSS 设置的属性是可见的，因此您不必更改轨道。