如何防止webkit滚动条推出div的内容？

我正在使用webkit滚动条，并且遇到样式问题，因为webkit滚动条正在向左推动div的内容，导致内容溢出。如何防止webkit滚动条推出div的内容？

通知

1箱采用默认的浏览器滚动条，不溢出（好）
第二箱采用WebKit的滚动条，其最终打破了布局。（坏/问题）

任何想法，我做错了与WebKit的滚动条，以使股利/溢出。我们如何修复第二个盒子？由于

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

来源

2012-10-24 AnApprentice

你会介意更新下面评分较高的人接受的答案吗？ – Andy

嗯......我不能想办法让在覆盖WebKit的滚动条。一种解决方案来停止生产线断裂是隐藏滚动条与

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

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

.box ul { 
    width: 149px; 
}

来源

2012-11-20 09:40:22 Vikko

您是否尝试将overflow-y:overlay放在父div中？它适用于我在铬。 This page表示它也可以在safari中使用。

来源

2013-11-16 04:38:49 Dex

似乎这应该是在这里选择的答案。完美的作品 – atmd

它不能在Firefox中工作 –

优雅的解决方案。就像@EidanSpiegel说的那样，不适用于Firefox。 – perkrlsn

有一种方法可以让滚动条在div外显示。

使用静态宽度并将div位置作为绝对位置。适用于我。

#divID{ 
overflow: hidden; 
width: calc(1024px + 0); 
} 

#divID:hover{ 
overflow-y:scroll; 
}

这个愚弄DOM。

来源

2015-04-12 00:00:51

如何防止webkit滚动条推出div的内容？

回答

相关问题