![](/img/trans.png)
[英]How can you prevent ::-webkit-scrollbar from pushing over elements
[英]How to prevent a webkit-scrollbar from pushing over the contents of a div?
我正在使用 webkit-scrollbar 并且遇到样式问题,因为 webkit 滚动条将 div 的内容向左推送,这导致内容溢出。
注意
任何想法我在 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;
}
您是否尝试将overflow-y:overlay
放在父 div 中? 它在 chrome 中对我有用。 这个页面说它也适用于 safari。
嗯.. 我想不出让 webkit 滚动条叠加的方法。 停止换行的一种解决方案是隐藏滚动条
.box2::-webkit-scrollbar {
height: 16px;
overflow: visible;
width: 16px;
display: none;
}
其他您可以将 UL 的宽度设置为与框相同,以便它利用溢出功能并显示在滚动条下
.box ul {
width: 149px;
}
有一种方法可以让滚动条显示在 div 之外。
使用静态宽度并将 div 位置设为绝对。 为我工作。
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scroll;
}
这愚弄了 DOM。
这就是我让它在 Chrome 上工作的方式,而不是破坏Firefox:
overflow: scroll;
overflow-x: hidden;
overflow-y: overlay;
我的意思是,滚动条仍在 Firefox 上占用width
空间,但至少它仍在显示和工作。
通过只做overflow-y: overlay;
,我正在修复 Chrome 并破坏了我的 Firefox 滚动条。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.