制作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可滚动

回答

相关问题