当把数据放在div里面,然后给div设置Scroll显示,在页面刷新后或者是处理了某个按钮的事件,这个时候div的滚动轴就会又回到起始位置,但事实上得把数据还记录到刷新前的位置!
经过思考,以及网上查询信息,得到解决办法:
Js部分:
<script type="text/javascript">
//刷新时滚动条保留位置
function ScrollToSelectNode() {
document.getElementById("left").scrollTop = "<%=ScrollValue%>";
}
function bindData() {
document.getElementById("divScrollValue").value = document.getElementById("left").scrollTop;
}
</script>
HTML部分:
<
body
onload
="ScrollToSelectNode()"
>
< form id ="Form1" runat ="server" onsubmit ="bindData()" >
< input runat ="server" id ="divScrollValue" type ="hidden" value ="" />
< div id ="left" style ="height: 100px; width: 100%; overflow-y: scroll; overflow-x: scroll;" >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
</ div >
< asp:Button ID ="Button1" runat ="server" Text ="Button" />
</ form >
</ body >
< form id ="Form1" runat ="server" onsubmit ="bindData()" >
< input runat ="server" id ="divScrollValue" type ="hidden" value ="" />
< div id ="left" style ="height: 100px; width: 100%; overflow-y: scroll; overflow-x: scroll;" >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
< p >
1 </ p >
</ div >
< asp:Button ID ="Button1" runat ="server" Text ="Button" />
</ form >
</ body >
后台代码:
public
static
string
ScrollValue
=
string
.Empty;
//
滚动条位置
protected void Page_Load( object sender, EventArgs e)
{
ScrollValue = divScrollValue.Value;
}
protected void Page_Load( object sender, EventArgs e)
{
ScrollValue = divScrollValue.Value;
}
主要就是用一个隐藏域记录当前滚动条位置,当刷新时读取这个记录,让它回到以前的位置!