Divスクロール可能にする

Question

私はファミリーツリーを表示するためにページを作成していますが、私は解決できないいくつかの問題があります。ツリーが3世代以上4世代以上ある場合、それを含むdivはビューポートよりも大きくなります。したがって、divをスクロール可能でドラッグ可能にする必要があります（私はドラッグビットとしてdragscroll.jsを使用しています）。

問題1：ビューポートに使用可能なスペースを収めるために、divの幅と高さを柔軟にする必要があります。これは幅方向には問題ありませんが、ピクセルで固定された高さがなければdivは高さ方向にスクロールできません。私はすべての種類の選択肢（高さ、高さ、高さ：高さ：auto、高さ：継承）を試みましたが、すべての場合divはスクロールできず、スクロールバーがウィンドウ全体に表示されます。

問題2：最初にページを開くときに、divを左揃えにして中央揃えで開始します。私はCentering a DIV that is wider than the viewportの前にこれについて尋ねましたが、うまくいった答えはありませんでした。それ以来、状況は少し変わりました。だから、おそらく誰かがこの時間を助けることができます。

htmlが

<-- Header --> 
<div id="wholetree"> 
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" name="add_gen"> 
<input type="hidden" name="MM_insert" value="add_gen"> 
<a href="javascript:void()" onclick="document.add_gen.submit()" class="tree_button">Add Another Generation</a> 
</form> 
<form action="map.php" method="get" name="view_map"> 
<input type="hidden" name="origin" value="<?php echo $origin_id ?>"> 
<a href="javascript:void()" onclick="document.view_map.submit()" class="tree_button view_button">View the Map</a> 
</form> 
<div id="tree" class="dragscroll"> 
<-- Unordered list to make the family tree --. 
</div> 

され、CSSの関連部分は

#wholetree{position:relative;top:96px;padding-top:15px} 

#tree { 
position:relative; 
overflow:auto; 
padding:10px; 
height:400px; 
background-color:#f2f2ff; 
border:#CCF 1px solid 
} 

#tree ul { 
padding: 0 0 20px; 
position: relative; 
} 

#tree li { 
display: inline-block; 
white-space: nowrap; 
vertical-align: bottom; 
margin: 0 -2px 0 -2px; 
text-align: center; 
list-style-type: none; 
position: relative; 
padding: 0 5px 20px 5px; 
} 

あるページのサンプルはここで見ることができます：

問題http://myrootsmap.com/soexample.php

SOLUTIONS 1： AllDaniが私を右に指摘した方向。水平スクロールが正しく機能していたので、オーバーフローを自動変更：overflow-x：autoに変更しました。次に、overflow-yを追加しました。スクロールして、ほとんどの画面で正しく見えるように高さを調整しました。冗長なスクロールバーがあり、ツリーが小さいときにツリーが異常に大きいときに2番目の（本文）スクロールバーがあるので理想的ではありませんが、私はそれを使って暮らすことができると思います。 jQueryのここで私の救助に来た ： だからCSSへの変更は

#tree { 
position:relative; 
overflow-x:auto; 
overflow-y:scroll; 
padding:10px; 
height:490px; 
background-color:#f2f2ff; 
border:#CCF 1px solid; 
} 

問題2でした。私はscrollWidthでdivを測定し、divを半分スクロールしてscrollLeftで中央に配置しました。同時に私は利用可能なスペースよりも大きい場合にはdivをスクロールするscrollTopにも使用しました。

$(document).ready(function(){ 
var windowWidth = $(window).width(); 
var treeWidth = $('#tree').get(0).scrollWidth; 
var d = $('#tree'); 
d.scrollTop(d.prop("scrollHeight")); 
d.scrollLeft((treeWidth-windowWidth)/2); 
}); 

サンプルページを利用可能にして、次のすべてのユーザーがそれがどのように最終形式で動作するかを確認します。

Answer 1

overflow: scroll;をCSSに追加します。