自定义 webkit 滚动条位置答案

【问题标题】：Custom webkit scrollbar position自定义 webkit 滚动条位置
【发布时间】：2013-11-13 00:43:12
【问题描述】：

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

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

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

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

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

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

提前致谢！

【问题讨论】：

标签： scrollbar

【解决方案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 设置的属性是可见的，因此您不必更改轨道片。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

如果您只想显示拇指而不是考虑隐藏滚动条的其他元素：resizer、scrollbar-button 和 scrollbar-corner 。

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

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

【讨论】：