頁面重新整理或者回發後DIV的滾動條位置不變!
阿新 • • 發佈:2019-01-02
當把資料放在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>
後臺程式碼:
public static string ScrollValue = string.Empty;//滾動條位置
protected void Page_Load(object sender, EventArgs e)
{
ScrollValue = divScrollValue.Value;
}
主要就是用一個隱藏域記錄當前滾動條位置,當重新整理時讀取這個記錄,讓它回到以前的位置!