Question

我正在编写一个显示家谱的页面，我遇到了一些我无法解决的问题。如果树有超过3代或4代，则包含它的div大于视口。因此我需要div可滚动和可拖动（我使用dragscroll.js作为拖动位）。

问题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

解

问题1： AllDani向我指出了正确的方向。水平滚动工作正常所以我改变了溢出：auto to overflow-x：auto。然后添加overflow-y：滚动并将高度调整为大多数屏幕上看起来正确的东西。它不理想，因为有时会有一个冗余的滚动条，当树很小的时候，当树异常大的时候还有第二个（正文）滚动条，但我想我可以忍受它。所以对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);
});

我将保留示例页面，以便所有关注者都能看到它的最终形式。

Answer 1

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

使Div可滚动

1 个答案: