html - 如何防止 webkit-scrollbar 推过 div 的内容？

Question

我正在使用 webkit-scrollbar 并遇到样式问题，因为 webkit 滚动条将 div 的内容推向左侧，导致内容溢出。

注意事项

• 第一个框使用默认的浏览器滚动条并且不会溢出(好)
• 第二个框使用最终破坏布局的 webkit 滚动条。 (坏/问题)

http://jsfiddle.net/ryeah/1/

任何想法我在使用 webkit 滚动条做错了什么导致 div 溢出。我们如何修复第二个盒子？谢谢

Webkit 滚动条代码:

.box2::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px;
}
.box2::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 1px 1px 1px 6px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
.box2::-webkit-scrollbar-button {
    height: 0;
    width: 0;
}
.box2::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 4px;
}
.box2::-webkit-scrollbar-corner {
    background: transparent;
}

Answer 1

您是否尝试将 overflow-y:overlay 放在父 div 中？它适用于我的 chrome。 This page说它也适用于 safari。