使Div可滚动(Making a Div Scrollable)

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

问题1：我需要div的宽度和高度灵活，以适应视口中的可用空间。这在宽度方向上工作正常，但div在高度方向上不可滚动，除非它具有固定的高度（以像素为单位）。我尝试过各种各样的替代品（没有高度，高度为％，高度：自动，高度：继承），但在所有情况下，div都不可滚动，而且整个窗口上都会出现一个滚动条。

问题2：当第一次打开页面时，div是左对齐的，而我希望它开始居中对齐。我之前在中心比视口宽的DIV时问过这个问题，但我没有得到有效的答案。从那时起事情发生了一些变化，所以也许有人可以帮助这一次。

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

我将保留示例页面，以便任何关注者都可以看到它的最终形式是如何工作的。

I am working on a page to display a family tree and I have a couple of problems that I just can't solve. If the tree has more than 3 or 4 generations, the div containing it is bigger than the viewport. Therefore I need the div to be scrollable and draggable (I'm using dragscroll.js for the dragging bit).

Problem 1: I need the width and height of the div to be flexible in order to fit the available space in the viewport. This works fine in the width direction, but the div isn't scrollable in the height direction unless it has a fixed height in pixels. I've tried all sorts of alternatives (no height, height in %, height:auto, height:inherit) but in all cases the div is not scrollable and a scrollbar appears on the whole window instead.

Problem 2: When first opening the page the div is left-aligned whereas I want it to start centre-aligned. I asked about this before in Centering a DIV that is wider than the viewport but I didn't get an answer that worked. Things have changed a bit since then, so perhaps someone can help this time.

The html is

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

And the relevant part of the CSS is

#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; }

A sample of the page can be seen here: http://myrootsmap.com/soexample.php

SOLUTIONS

Problem 1: AllDani pointed me in the right direction. Horizontal scrolling was working correctly so I changed overflow:auto to overflow-x:auto. Then added overflow-y:scroll and adjusted the height to something that looks right on most screens. It's not ideal because there is sometimes a redundant scrollbar and when the tree is small, and there is a second (body) scrollbar when the tree is unusually large, but I think I can live with it. So the change to the CSS was

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

Problem 2: Jquery came to my rescue here. I measured the div with scrollWidth and then scrolled the div halfway to centre it with scrollLeft. At the same time I also used to scrollTop to scroll the div down if it is taller than the available space.

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

I'll leave the sample page available so that anyone following can see how it all works in it's final form.