0

ある種の html をデザインしようとしていますが、テキストの代わりに画像を使用したいと考えています。そこで、オプションごとに 2 つの div と、それらを囲む 2 つの div を使用して、非常に基本的な html アウトラインを作成しました。

<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 内に表示され、右側には表示されません。私が思いついた解決策の 1 つは、.dungeon-action-select を内部 div よりも 15 ピクセル大きくすることです。しかし、スクロールバーが (当然のことながら) 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 のアイデアが機能していればよかったのですが、私が見つけた唯一の有効な解決策は、(Marcelo が提案したように) JavaScript を使用してスクロールバーの幅を計算し、それに応じて含まれる 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

そして、テスト div を非表示にして、スクロールバーを持つように構成するためのいくつかの小さな css:

.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>

アップデート：

私はまだ完全には理解していません.... dungeon-action-select-container の幅を固定したい場合は、125px と言ってバーを含めますが、別のブラウザーの一部のバーがもっと必要になるのではないかと恐れています。これを試してください:

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

いくつかのピクセルを失うだけです.(効果を示すために、dungeon-action-select-containerを120pxにしました)

于 2013-05-31T15:44:21.560 に答える