如何防止webkit-scrollbar推过div的内容？
如何防止webkit-scrollbar推过div的内容？
提问于 2012-10-25 01:46:02
我正在使用webkit-scrollbar，并且遇到了样式问题，因为webkit滚动条将div的内容向左推，这会导致内容溢出。
通知
- 第一个框使用默认的浏览器滚动条并且不溢出(很好)
- 第二个框使用webkit滚动条，这最终破坏了布局。(坏/有问题)
你知道我用webkit滚动条做错了什么导致div to/overflow吗？我们怎样才能修复第二个盒子呢？谢谢
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
Stack Overflow用户
回答已采纳
发布于 2012-11-20 17:40:23
嗯..。我想不出让webkit滚动条覆盖的方法。停止换行的一种解决方案是隐藏滚动条
.box2::-webkit-scrollbar {
height: 16px;
overflow: visible;
width: 16px;
display: none;
}其他您可以将UL的宽度设置为与框的宽度相同，以便它利用overflow功能并显示在滚动条下
.box ul {
width: 149px;
}Stack Overflow用户
发布于 2013-11-16 12:38:50
你有没有试过把overflow-y:overlay放在父目录中？它适用于我的chrome浏览器。This page表示，它在safari中也有效。
Stack Overflow用户
发布于 2015-04-12 08:00:52
有一种方法可以让滚动条显示在div之外。
使用静态宽度，并将div位置设置为绝对宽度。这对我很有效。
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scroll;
}这欺骗了DOM。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13054797
复制相关文章
相似问题
腾讯云开发者
