如何防止webkit滚动条推送div的内容？ [英] How to prevent a webkit-scrollbar from pushing over the contents of a div?

问题描述

我使用webkit滚动条和运行到样式问题，因为webkit滚动条将div的内容推向左边，导致内容溢出。

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滚动条，最终打破了布局。 （坏/问题）

http：/ /jsfiddle.net/ryeah/1/

任何想法我在webkit滚动条做错了，导致div /溢出。我们如何修复第二个盒子？感谢

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滚动条代码：

.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;
}

推荐答案

t想到一种方式来获取webkit的滚动条在重叠。停止换行的一个解决方案是使用

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

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

其他你可以设置UL的宽度与框相同它使用溢出功能并在滚动条下显示

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

.box ul {
  width: 149px;
}

这篇关于如何防止webkit滚动条推送div的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！