Html 如何防止 webkit-scrollbar 推送 div 的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13054797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent a webkit-scrollbar from pushing over the contents of a div?
提问by AnApprentice
I'm using webkit-scrollbar and am running into styling issues as the webkit scrollbar is pushing the contents of a div to the left which causes the contents to overflow.
我正在使用 webkit-scrollbar 并且遇到样式问题，因为 webkit 滚动条将 div 的内容向左推，导致内容溢出。
Notice
注意
- 1st box uses the default browser scrollbar and does not overflow (good)
- 2nd box uses the webkit scrollbar which ends up breaking the layout. (bad/problem)
- 第一个框使用默认浏览器滚动条并且不会溢出（好）
- 第二个框使用最终破坏布局的 webkit 滚动条。（坏/问题）
Any ideas what I'm doing wrong with webkit scrollbar to cause the div to/overflow. How can we fix the 2nd box? Thanks
任何想法我在 webkit 滚动条上做错了什么导致 div 溢出/溢出。我们如何修复第二个盒子？谢谢
Webkit Scrollbar Code:
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;
}
采纳答案by Vikko
Hm.. I can't think of a way to get the webkit scrollbar in overlay. One solution to stop the line breaking is to hide the scrollbar with
嗯.. 我想不出让 webkit 滚动条叠加的方法。停止换行的一种解决方案是隐藏滚动条
.box2::-webkit-scrollbar {
height: 16px;
overflow: visible;
width: 16px;
display: none;
}
other you can set the width of your UL to the same as the box so it makes use of the overflow function and displays under the scrollbar
其他您可以将 UL 的宽度设置为与框相同，以便它利用溢出功能并显示在滚动条下
.box ul {
width: 149px;
}
回答by Dex
回答by Edward Newsome
There is a way to get the scroll bar to display outside the div.
有一种方法可以让滚动条显示在 div 之外。
Use a static width and have the div position as absolute. Works for me.
使用静态宽度并将 div 位置设为绝对。为我工作。
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scroll;
}
This fools the DOM.
这愚弄了 DOM。
