我可以展开一个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> ，用作宽度均匀的按钮菜单.用户可以从菜单中添加/删除按钮.当< div> 中的垂直按钮数量过多时，我希望它可以滚动-因此我使用的是 overflow-y:auto ，实际上当 y 中的内容太大时，添加滚动条.不幸的是，当滚动条显示时，它与菜单按钮重叠，并因此添加了水平滚动条-最大的问题是它看起来太可怕了.

是否有解决此问题的正确"方法?我很想学习一些样式技巧，以使其正常工作(即，滚动条位于div的外部而不是内部，或者div在必要时自动扩展以容纳滚动条).如果需要使用javascript，那很好-我已经在使用 jQuery -在这种情况下，正确的事件是检测正在添加/移除的滚动条，以及如何确保使用以跨浏览器/跨样式的方式正确设置宽度?

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

  HTML:< button type ="button" id ="add">添加按钮！</button>< div id ="menu"></div>CSS:#菜单{背景:灰色；高度:150像素；溢出-y:自动;向左飘浮;}脚本:$('#add').button().click(function(){var d = $('< div/>');var b = $('< button type ="button"> Test</button>');d.appendTo($('#menu'));b.button().appendTo(d);}); 

解决方案

首先:要删除水平滚动条集 overflow-x:隐藏； ，就像Trent Stewart在另一个答案中已经提到的那样.>

CSS方法:

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

这里是您的案例的 jsfiddle .注意新的包装< div id ="menu-wrap"> 及其固定宽度 width:95px; .在这种情况下，包装div会进行滚动.

您也可以通过在包装纸的右侧添加一些填充物来解决此问题，从而避免固定宽度的问题.

---

jQuery方法:

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

在您的示例中， jsfiddle .每次单击后，将使用单击功能来检查div的高度，然后添加一些填充以为滚动条腾出空间. innerHeight 和

要使其对跨浏览器更加友好，您可以检查滚动条的宽度(如此处所述)，然后添加返回的值，而不是固定的填充.这里有另一个 jsfiddle 进行演示.

---

可能还有许多其他方法，但这就是我要解决的方法.

Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?

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.

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/

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

解决方案

First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.

CSS Approach:

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.

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 Approach:

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.

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

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屋！