我可以扩展一个div，所以overflow-y：auto滚动条不剪辑div内容？ [英] Can I expand a div so the overflow-y:auto scrollbar doesn't clip the div content?
问题描述
类似的问题，没有很好的答案：
如何包括overflow：auto;的宽度。动态大小的绝对div中的滚动条？
我有一个< div> code>固定高度，作为宽度均匀的按钮菜单。用户可以从菜单中添加/删除按钮。当在< div> 中有更多可以垂直放置的按钮时，我希望它可以滚动 - 所以我使用 overflow-y ：auto ，当 y 中的内容太大时，确实添加了滚动条。不幸的是，当滚动条出现时，它重叠菜单按钮，并添加了一个水平滚动条作为结果 - 大问题是看起来可怕。
I have a <div> of fixed height that acts as a menu of buttons of uniform width. Users can add/remove buttons from the menu. When there are more buttons than can fit vertically in the <div>, I want it to become scrollable - so I'm using overflow-y:auto, which indeed adds a scrollbar when the content is too large in y. Unfortunately, when the scrollbar shows up it overlaps the menu buttons, and adds a horizontal scroll bar as a result - the big problem is it just looks horrible.
正确的方式来解决这个问题？我喜欢学习一些风格的技巧，使其正常工作（即滚动条位于div之外，而不是内部，或者div自动扩展，以适应滚动条在必要时）。如果javascript是必要的，那很好 - 我已经使用 jQuery - 在这种情况下，什么是正确的事件是检测滚动条被添加/删除，以及如何我确保以跨浏览器/交叉风格的方式使用正确的宽度？
Is there a "right" way to fix this? I'd love to learn some style trick to make it work right (i.e. the scrollbar sits outside the div rather than inside, or the div automatically expands to accommodate the scroll bar when necessary). If javascript is necessary, that's fine - I'm already using jQuery - in that case, what are the right events are to detect the scrollbar being added/removed, and how do I make sure to use the correct width in a cross-browser/cross-style way?
JSFiddle： http://jsfiddle.net/vAsdJ/
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);
});
推荐答案
首先：删除水平滚动条集<$ c
First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.
CSS方法： overflow-x：hidden; 正如Trent Stewart在另一个答案中提到的。 >
CSS Approach:
我过去做的一件事是在内容div上添加一个更宽的包装div，为滚动条腾出空间。但是，这只有当你的容器宽度是固定的...，并且可能需要调整（通过服务不同的样式）在各种浏览器由于滚动条的变量呈现。
One thing I have done in the past is to add a wider wrapping div around the content div to make room for the scrollbar. This, however, only works if your container width is fixed... and may need to be adjusted (by serving different styles) in various browsers due to variable rendering of scrollbars.
这里是 jsfiddle 您的情况。注意新的包装器< div id =menu-wrap> 及其固定宽度 width：95px; 。在这种情况下，包装器div正在进行滚动。
Here a jsfiddle for your case. Note the new wrapper <div id="menu-wrap"> and its fixed width width: 95px;. In this case the wrapper div is doing the scrolling.
您可能还可以通过给右边的包装器一些填充来解决这个问题，从而避免固定宽度的问题。
You could probably also solve this by giving the wrapper some padding on the right, and thereby avoid the fixed width problem.
jQuery方法：
另一个选项是使用jquery检测溢出，如此处所述，然后增加宽度或填充div以腾出空间。
Another option is to detect the overflow using jquery as described here, and then increasing the width or padding of the div to make space. You may still have to make browser-specific adjustments though.
在这里，您可以使用 jsfiddle 与您的示例的简化版本。这使用您的点击功能检查每次点击后的div高度，然后添加一些填充，为滚动条腾出空间; innerHeight 和 scrollHeight ：
Here a jsfiddle with a simplified version for your example. This uses your click function to check the div height after every click, and then adds some padding to make room for the scrollbar; a basic comparison between innerHeight and scrollHeight:
if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
$('#menu').css( "padding", "0 15px 0 0" );
}
为了使这个更好的跨浏览器友好，你可以检查滚动条宽度如此处所述），然后添加返回的值，而不是固定的填充。这里另一个 jsfiddle 演示。
To make this more cross-browser friendly you could check for the scrollbar width (as outlined here) and then add the returned value instead of the fixed padding. Here another jsfiddle to demonstrate.
可能有很多其他方法，但这是我怎么去的。
There are probably many other methods, but this is how I would go about it.
这篇关于我可以扩展一个div，所以overflow-y：auto滚动条不剪辑div内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
