我可以扩展div,以便overflow-y:auto滚动条不会剪辑div内容吗？

Question

类似的问题,没有一个很好的答案:
我怎么能包括"overflow:auto;"的宽度 动态大小的绝对div中的滚动条？

我有一个<div>固定的高度,作为一个宽度均匀的按钮菜单.用户可以从菜单中添加/删除按钮.当有多个按钮可以垂直放入时<div>,我希望它可以滚动 - 所以我正在使用overflow-y:auto,当内容太大时确实会添加一个滚动条y.不幸的是,当滚动条显示时,它会重叠菜单按钮,并添加一个水平滚动条 - 最大的问题是它看起来很糟糕.

有没有"正确"的方法来解决这个问题？我喜欢学习一些风格技巧,使其正常工作(即滚动条位于div之外而不是内部,或div在必要时自动扩展以容纳滚动条).如果javascript是必要的,那很好 - 我已经在使用jQuery- 在这种情况下,正确的事件是检测正在添加/删除的滚动条,以及如何确保在跨浏览器中使用正确的宽度/跨式的方式？

JSFiddle:http://jsfiddle.net/vAsdJ/

HTML:
<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>

CSS:
#menu{
    background:grey;
    height:150px;
    overflow-y:auto;
    float:left;
}

Script:
$('#add').button().click(function(){
    var d = $('<div/>');
    var b = $('<button type="button">Test</button>');
    d.appendTo($('#menu'));
    b.button().appendTo(d);
});

Answer 1

第一：删除水平滚动条设置，overflow-x: hidden;如 Trent Stewart 在另一个答案中已经提到的。

CSS 方法：

我过去做过的一件事是在内容 div 周围添加更宽的环绕 div 以便为滚动条腾出空间。然而，这只适用于容器宽度固定的情况...并且由于滚动条的渲染可变，可能需要在各种浏览器中进行调整（通过提供不同的样式）。

这是适合您情况的jsfiddle 。请注意新的包装纸<div id="menu-wrap">及其固定宽度width: 95px;。在这种情况下，包装 div 正在执行滚动。

您也可以通过在右侧给包装器一些填充来解决此问题，从而避免固定宽度问题。

jQuery 方法：

另一种选择是使用 jquery 检测溢出（如此处所述），然后增加 div 的宽度或填充以腾出空间。不过，您可能仍然需要进行特定于浏览器的调整。

这里有一个带有简化版本的jsfiddle用于您的示例。这使用您的单击函数在每次单击后检查 div 高度，然后添加一些填充以为滚动条腾出空间；innerHeight和scrollHeight之间的基本比较：

if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
    $('#menu').css( "padding", "0 15px 0 0" );
}

为了使跨浏览器更加友好，您可以检查滚动条宽度（如此处所述），然后添加返回值而不是固定填充。这里还有另一个jsfiddle来演示。

可能还有很多其他方法，但这就是我要采用的方法。