如何防止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？它适用于我的铬.这个页面说它也适用于safari.

Answer 2

这就是我让它在 Chrome 上运行而不破坏Firefox 的方法：

overflow: scroll;
overflow-x: hidden;
overflow-y: overlay;

我的意思是，滚动条在 Firefox 上仍然占据width空间，但至少它仍然显示并工作。

通过这样做overflow-y: overlay;，我修复了 Chrome 并破坏了 Firefox 的滚动。

Answer 3

嗯..我想不出一种方法可以让 webkit 滚动条处于叠加状态。停止断行的一种解决方案是隐藏滚动条

.box2::-webkit-scrollbar {
  height: 16px;
  overflow: visible;
  width: 16px;
  display: none;
}

另外，您可以将 UL 的宽度设置为与框相同，以便它利用溢出功能并显示在滚动条下

.box ul {
  width: 149px;
}