我正在使用webkit-scrollbar并且遇到样式问题,因为webkit滚动条将div的内容推到左侧,导致内容溢出。
注意
任何想法我在使用webkit滚动条做错了导致div到/溢出。我们如何修理第二个盒子?感谢
Webkit Scrollbar Code:
.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;
}
答案 0 :(得分:60)
您是否尝试将overflow-y:overlay
放入父div中?它适用于我的铬。 This page说它也适用于野生动物园。
答案 1 :(得分:3)
嗯..我想不出一种方法来获取叠加的webkit滚动条。停止换行的一种解决方案是使用
隐藏滚动条.box2::-webkit-scrollbar {
height: 16px;
overflow: visible;
width: 16px;
display: none;
}
其他您可以将UL的宽度设置为与框相同,以便它使用溢出功能并显示在滚动条下
.box ul {
width: 149px;
}
答案 2 :(得分:3)
有一种方法可以让滚动条显示在div之外。
使用静态宽度并将div位置设为绝对值。适合我。
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scroll;
}
这欺骗了DOM。
答案 3 :(得分:2)
这就是我让它在 Chrome 上运行的方式,并且不会破坏 Firefox:
overflow: scroll;
overflow-x: hidden;
overflow-y: overlay;
我的意思是,滚动条在 Firefox 上仍然占用 width
空间,但至少它仍在显示和工作。
通过执行 overflow-y: overlay;
,我修复了 Chrome 并破坏了我的 Firefox 滚动条。