Question

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

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

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

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

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

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

提前致谢！

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

但是，由于Apple人员正在推动无滚动条网页浏览，因此只有CSS设置的属性可见，因此您无需更改轨道。

Answer 2

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

要使拇指透明，请使用RGBa值来声明颜色。在这种情况下，我使用0,0,0,0.4（红色，绿色，蓝色，alpha）。每个浏览器都不支持RGBa，Chris Coyier在这里有一个很好的支持表格：http://css-tricks.com/rgba-browser-support/

如果要显示的只是拇指而不是考虑隐藏滚动条的其他元素：缩放器，滚动条按钮和滚动条角

html { overflow: auto; } body { position: absolute; top: 20px; left: 20px; bottom: 5px; right: 20px; overflow: scroll; } ::-webkit-scrollbar{ background:transparant; 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}

查看http://jsfiddle.net/Buttonpresser/G53JQ/
上的工作演示

Answer 3

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

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

自定义webkit滚动条位置

3 个答案: