Splitter 中的 JQWidget 树意外滚动到顶部

Question

我对 JQuery 比较陌生。

我有一个 JQWidgets 拆分器，在左窗格中我放了一个 JQWidgets 树。这棵树足够长，我需要一个卷轴才能看到它的全部。当我展开一个节点时，左窗格会重新绘制，这样尽管节点已展开，但滚动条仍位于包含树的窗格顶部。我看不到我刚刚扩展的节点。我希望滚动条的位置重新定位它所在的位置，以便我刚刚展开的节点保留在光标下方。这个问题很容易重现。

....
<div id='splitter'>
    <div id='splitter-left'>
        <div id='tree'>
            <ul><li></li>...</ul>
        </div>
    </div>
    <div id='splitter-right'>
    ...
    </div>
</div>
...
<script type='text/javascript>
    $(function () {
        $("#splitter").jqxSplitter();
        $("#tree").jqxTree();
    });
</script>

我有一个 JSFiddle 演示此行为，其中包含所有 CSS 和 JScript 引用。它有一个足够长的列表列表溢出。扩展节点时如何让树停止弹跳？

注意：如果树不在拆分器中，它的行为与我预期的一样。这似乎是树和分裂器的协作导致的。

TIA

Answer 1

您可以将树的高度设置为 100%，这样小部件将使用其 ScrollBar 进行滚动，而浏览器将不会在 Focus 上自动滚动。示例：http://jsfiddle.net/6cr22ygy/

<div id="splitter">
    <div id="splitter-left" style="overflow: auto">
        <div style='border:none;' id="tree">
            <ul>
                <li>root
                    <ul>
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                        <li>d
                            <ul>
                                <li>da</li>
                                <li>db</li>
                                <li>dc</li>
                                <li>dd
                                    <ul>
                                        <li>dda</li>
                                        <li>ddb</li>
                                        <li>ddc</li>
                                        <li>ddd</li>
                                        <li>dde</li>
                                        <li>ddf</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>e</li>
                        <li>f</li>
                        <li>g</li>
                        <li>h</li>
                        <li>i</li>
                        <li>j</li>
                        <li>k</li>
                        <li>l</li>
                        <li>m</li>
                        <li>n</li>
                        <li>o</li>
                        <li>p</li>
                        <li>q</li>
                        <li>r</li>
                        <li>s</li>
                        <li>t</li>
                        <li>u</li>
                        <li>v</li>
                        <li>w</li>
                        <li>x</li>
                        <li>y
                            <ul>
                                <li>ya</li>
                                <li>yb</li>
                                <li>yc</li>
                                <li>yd</li>
                                <li>ye</li>
                                <li>yf</li>
                                <li>yg</li>
                                <li>yh</li>
                                <li>yi</li>
                                <li>yj</li>
                            </ul>
                        </li>
                        <li>z
                            <ul>
                                <li>za</li>
                                <li>zb</li>
                                <li>zc</li>
                                <li>zd</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div id="splitter-right">
         <h3>Steps to Reproduce</h3>

        <ol>
            <li>Run</li>
            <li>expand root</li>
            <li>Scroll to y</li>
            <li>expand y</li>
        </ol>
         <h3>Expect</h3>

        <p>node expanded and visible (position preserved in pane)</p>
         <h3>Observe</h3>

        <p>node expanded, but tree has been repositioned to top of pane</p>
    </div>
</div>

JavaScript

$(function () {
    $("#splitter").jqxSplitter();
    $("#tree").jqxTree({height:"100%"});
});

有关 jQWidgets 树高度的更多信息属性：jQWidgets Tree API

Splitter 中的 JQWidget 树意外滚动到顶部

JQWidget Tree in Splitter scrolls to top unexpectedly

jquery

tree

jqwidget