确保整个动态生成的ul及其lis出现在页面底部上方

Question

我有一个动态扩展的浏览树。当用户点击动态创建的li时，他/她扩展下一个UL＆gt;李。如果新创建的UL中只有一个选项，它会自动转发到下一个级别。发生这种情况时，第3个列表中的项目有时会显示在页面底部的下方。

<div id="wrapper">
<ul id="ul-level-one">
    <li id="1">Item one</li>
    <li id="2">Item two</li>
    <li id="3">Item three</li> [selected]
        <ul id="ul-level-two">
            <li id="1">Item A</li>
                <ul id="ul-level-three">
                    <li id="1">Item one</li>
                    <li id="2">Item two</li>
                    <li id="3">Item three</li> -- these items fall below page bottom
                    <li id="4">Item four</li>
                </ul>
        </ul>
    <li id="4">Item four</li>
    <li id="5">Item five</li>
</ul>
</div>

我正在尝试找到一种方法来确保显示ul的所有项目。我尝试将最新UL的最终LI滚动到视图中，但它似乎没有工作。

$('#ul-level-three li:last').get(0).scrollIntoView();

请协助。

KMT