製作Div可滾動

我正在一個頁面上顯示一棵家族樹，我有幾個我無法解決的問題。如果該樹超過3或4代，則包含它的div比視口大。因此，我需要div可滾動和可拖動（我使用dragscroll.js作爲拖動位）。製作Div可滾動

問題1：爲了適應視口中的可用空間，我需要div的寬度和高度靈活。這在寬度方向上工作良好，但div不能在高度方向上滾動，除非它具有固定的像素高度。我嘗試了各種各樣的替代品（沒有高度，高度在％，高度：自動，高度：繼承），但在所有情況下，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指出我的權利方向。水平滾動工作正常，所以我改變了溢出：自動溢出-x：自動。然後添加overflow-y：scroll並將高度調整爲在大多數屏幕上看起來正確的東西。這並不理想，因爲有時候會有多餘的滾動條，當樹很小時，當樹非常大時有第二個（主體）滾動條，但我認爲我可以忍受它。所以換到CSS是

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

問題2： jQuery的拯救了我這裏。我用scrollWidth測量了div，然後半按滾動div以使其與scrollLeft居中。同時我也用scrollTop來滾動div，如果它比可用空間高。

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

我會離開樣本頁面，以便任何人都可以看到它是如何工作在它的最終形式。

來源

2016-10-08 TrapezeArtist

@AllDani，我當然有。我覺得我已經嘗試了#wholetree和tree中每個高度和溢出的排列。但我願意接受建議。 – TrapezeArtist

@AllDani，現在你已經找到了我還沒有嘗試過的東西！乍看之下，它看起來好像可以工作，雖然它不是很漂亮。我會設置溢出：滾動，然後找到一個固定的高度，這是有道理的（當標題被扣除時，可能略低於標準的筆記本電腦屏幕）。還有一些工作要做，以找到最好的解決方案，但我現在要去吃午飯了。順便說一句，我剛剛發現示例頁面無法正常工作，所以我現在修復了這個問題。 – TrapezeArtist

@Trapeze：請不要將您的解決方案添加到您的問題。相反，你應該將它們*作爲答案*。然後，您可以在等待48小時後接受自己的答案。 –

將overflow: scroll;添加到您的CSS。

來源

2016-10-10 20:02:47

製作Div可滾動

回答

相關問題