本文介绍了一种在页面刷新后使TreeView中被选中的节点保持可见的方法，通过使用JavaScript的scrollIntoView方法，并调整滚动条位置确保选中节点始终位于可视区域内。
选择TreeView节点，页面回送刷新后，滚动条自动回到TreeView顶部，而不是被选中节点处，使节点在Treeview可视区域可见，可以利用scrollIntoView方法使TreeView中页面刷新后自动定位到被选择节点处，使被选择节点可见，方法如下：
<!--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> <!--JS处理方法--><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 也是类似道理。
扫一扫
3692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
