html 选择图像(或如何将滚动条移出 div [或如何知道 sb 宽度])

Question

我尝试设计某种 html，但我想使用图像而不是文本。所以我构建了一些非常基本的 html 大纲，每个选项都有两个 div，周围有两个 div:

<div class="dungeon-action-select-container">
    <div class="dungeon-action-select">
        <div class="border"><div></div></div>
        <div class="border"><div></div></div>
        <div class="border selected"><div></div></div>
        <div class="border"><div></div></div>
        <div class="border"><div></div></div>
    </div>
</div>  

最内层的 div 的作用是稍后包含图像。 .border div 允许为选定的选项提供不同的视觉效果。当有更多选项可供选择时，.dungeon-action-select 应包含垂直滚动条。

容器 div 在那里，允许将整个“东西”固定放置在屏幕的左上角。

我的问题:当.dungeon-action-select div 太小时，要显示所有选项，会有一个垂直滚动条。但是垂直滚动条显示在 div 中，而不是附加在右侧。我想到的一种解决方案是使 .dungeon-action-select 比内部 div 大 15px。但这只是一个 hack，因为滚动条可能(当然)大于 15px。

到目前为止，这是我的“解决方案”:

.dungeon-action-select-container {
    position: fixed;
    width: 125px; /* 80px + 2 * 15px + width of scrollbar */
    top: 60px;
    left: 25px;
}

.dungeon-action-select-container .dungeon-action-select {
    height: 320px;
    overflow: auto;
    position: relative;
}

.dungeon-action-select-container .dungeon-action-select .border {
    background-color: #333;
    padding: 7px 15px;
}

.dungeon-action-select-container .dungeon-action-select .border div {
    width: 80px;
    height: 80px;
    background-color: black;
}

所以我正在寻找一种方法来自动使包含 div 的滚动条足够大，以便为选项 div 和滚动条(在需要时)留出位置。或者从 .dungeon-action-select div 外部附加滚动条的方法。或者作为最后的手段，一些技巧来确定滚动条的大小。

欢迎任何指点；这是一个 fiddle :http://jsfiddle.net/b8kUr/2/

解决方案:我希望 Sharkys 的想法能奏效，但我发现唯一可行的解​​决方案是使用 JavaScript(正如 Marcelo 所建议的那样)来计算滚动条的宽度并相应地调整包含的 div 的大小(解决方案基于另一个问题，我在 SO 上找到了这里):

scrollBarHeightAndWidth = null

calcScrollBarHeightAndWidth = ->
    scrollDiv = document.createElement("div")
    scrollDiv.className = 'tools-scrollbar-measure'
    document.body.appendChild(scrollDiv)

    # Get the scrollbar width
    result = {
        width: scrollDiv.offsetWidth - scrollDiv.clientWidth,
        height: scrollDiv.offsetHeight - scrollDiv.clientHeight
    }

    # Delete the DIV 
    document.body.removeChild(scrollDiv)

    result

Tools.scrollBarWidth = ->
    scrollBarHeightAndWidth = scrollBarHeightAndWidth || calcScrollBarHeightAndWidth()
    scrollBarHeightAndWidth.width

和一些小的 css 来隐藏测试 div 并配置它有一个滚动条:

.tools-scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

Answer 1

滚动条总是显示在 block 元素内。您可以使用 JQuery 来确定是否需要滚动条，如果为真则使您的 div 更宽。

var height = 0;

$('div.border').each(function(){
    height += parseInt( $(this).height() ); 
});

if( height > parseInt( $('div.dungeon-action-select').height() ) ) {
    $('div.dungeon-action-select-container').css('width','+=18px');
} 

查看实际效果:http://jsfiddle.net/b8kUr/8/