0

我尝试设计某种 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。但这只是一个技巧，因为滚动条可能（当然）大于 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 外部附加滚动条的方法。或者作为最后的手段，一些技巧来确定，可移植滚动条的大小。

欢迎任何指点；这是一个可以摆弄的小提琴：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;
}
4

2 回答 2

1

我不太确定我是否理解正确...为什么不使用外部 div 作为栏？

http://jsfiddle.net/b8kUr/4/

<div class="dungeon-action-select-container">
    <div class="scrollbar_wrap"> <!-- overflow:auto;height:200px; -->
        <div class="dungeon-action-select"> <!-- changed overflow to none -->
            <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>

更新：

我还是不完全明白....如果你想让你的地牢动作选择容器有一个固定的宽度，可以说 125px 所以它包括栏但你担心不同浏览器中的一些栏可能需要更多试试这个：

http://jsfiddle.net/b8kUr/11/

您只会丢失一些像素。（我将地牢动作选择容器设置为 120 像素以向您展示效果）

于 2013-05-31T15:44:21.560 回答
1

滚动条总是显示在块元素内。您可以使用 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/

于 2013-05-31T15:44:42.690 回答