javascript - 我可以扩展一个 div 以便 overflow-y :auto scrollbar doesn't clip the div content?

Question

Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute 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;正如特伦特斯图尔特已经在另一个答案中提到的那样。

CSS 方法:

我过去做过的一件事是在内容 div 周围添加一个更宽的包装 div，以便为滚动条腾出空间。然而，这仅在您的容器宽度固定时才有效...并且由于滚动条的可变呈现，可能需要在各种浏览器中进行调整(通过提供不同的样式)。

这里是jsfiddle对于你的情况。注意新包装 <div id="menu-wrap">及其固定宽度 width: 95px; .在这种情况下，包装器 div 正在滚动。

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

---

jQuery 方法:

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

这里是jsfiddle为您的示例提供简化版本。这使用您的点击功能在每次点击后检查 div 高度，然后添加一些填充以为滚动条腾出空间； innerHeight 之间的基本比较和 scrollHeight :

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

为了使它对跨浏览器更友好，您可以检查滚动条宽度(如概述 here )，然后添加返回值而不是固定填充。这里还有一个jsfiddle进行演示。

---

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