33

我正在使用 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;
}
4

4 回答 4

89

您是否尝试放入overflow-y:overlay父div？它适用于我的铬。这个页面说它也适用于野生动物园。

于 2013-11-16T04:38:49.770 回答
3

嗯..我想不出一种让 webkit 滚动条覆盖的方法。停止换行的一种解决方案是隐藏滚动条

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

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

.box ul {
  width: 149px;
}
于 2012-11-20T09:40:22.873 回答
3

有一种方法可以让滚动条显示在 div 之外。

使用静态宽度并将 div 位置设为绝对位置。为我工作。

#divID{
overflow: hidden;
width: calc(1024px + 0);
}

#divID:hover{
overflow-y:scroll;
}

这愚弄了 DOM。

于 2015-04-12T00:00:51.777 回答
3

这就是我如何让它在 Chrome 上运行，而不是破坏Firefox：

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

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

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

于 2021-02-01T17:42:16.680 回答