滚动TreeView滚动条到被选中节点

最新推荐文章于 2024-06-05 09:54:28 发布

转载最新推荐文章于 2024-06-05 09:54:28 发布 · 858 阅读

文章标签：

#javascript #div #null #function #server #asp

本文介绍了一种使用 scrollIntoView 方法确保 TreeView 中选定节点可见的技术。通过 JavaScript 实现，即使页面刷新后也能让指定节点保持在可视区域内。

选择TreeView节点，页面回送刷新后，滚动条自动回到TreeView顶部，而不是被选中节点处，使节点在Treeview可视区域可见，可以利用scrollIntoView方法使TreeView中页面刷新后自动定位到被选择节点处，使被选择节点可见，方法如下：


<body onload="ScrollToSelectNode();">
    。。。。。。
    <div id="divScroll" style="overflow-y:auto;overflow-x:auto;WIDTH: 250px;height:400px;">
        <asp:TreeView ID="tvAssetKind" runat="server" Width="100%" ExpandDepth="1">
        </asp:TreeView>
    </div>
    。。。。。。
</body>


<script language="javascript" type="text/javascript">
    //滚动到选择节点
    function ScrollToSelectNode()
    {
        try
        {
            var elem = document.getElementById('tvAssetKind_SelectedNode');
            if(elem != null )
            {
                var node = document.getElementById(elem.value);
                if(node != null)
                {
                    //滚动被选择节点到TreeView顶部
                    node.scrollIntoView();

                    //使被选择节点距离TreeView顶部10，使被选择节点可见
                    document.getElementById("divScroll").scrollLeft = 0;
                    document.getElementById("divScroll").scrollTop -= 10;
                }
            }
        }
        catch(oException)
        {
        }
    }
</script>

scrollTop、scrollLeft、scrollWidth、scrollHeight

scrollTop 是“卷”起来的高度值，示例：

<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
    <div style="width:50px;height:300px;background-color:#0000FF;" id="t">
        如果为 p 设置了 scrollTop，这些内容可能不会完全显示。
    </div>
</div>

<script type="text/javascript">
    var p = document.getElementById("p");
    p.scrollTop = 10;
</script>

由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷。
scrollLeft 也是类似道理。
我们已经知道 offsetHeight 是自身元素的宽度。
而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐藏的部分。
上述中 p 的 scrollHeight 为 300，而 p 的 offsetHeight 为 100。
scrollWidth 也是类似道理。