Asp.net

在回發時保持頁面內 div 的滾動位置

  • April 10, 2014

我在 aspx 頁面中有一個 div,溢出設置為自動。div 的內容是動態創建的,由連結按鈕列表組成。

<div id="div1" style="overflow: auto; height: 100%;">
.....
</div>

當我在 div 中向下滑動並點擊任何連結按鈕時,頁面重新載入會失去 div 內的滾動位置並將我帶到 div 的頂部。有什麼辦法可以防止這種情況發生嗎?

請注意,這是針對頁面內的 div 的。Page.MaintainScrollPositionOnPostBack()不起作用。

正如 Jeff S 提到的處理這種情況的一種方法是使用 javascript 來跟踪 div 的滾動位置,並且每次頁面載入時都會將滾動位置重置為其先前的值。

這是一些範常式式碼:

<html>
<body onload="javascript:document.getElementById('div1').scrollTop = document.getElementById('scroll').value;">
   <form id="form1" runat="server">
   <input type="hidden" id="scroll" runat="server" />
   <div id="div1" style="overflow: auto; height: 100px;" onscroll="javascript:document.getElementById('scroll').value = this.scrollTop">
       ...........<br />
       ...........<br />
       ...........<br />
       ...........<br />
       ...........<br />
       ...........<br />
       ...........<br />
       ...........<br />
       ...........<br />
       ...........<br />
       ...........<br />
       ...........<br />
       <asp:LinkButton ID="LinkButton1" runat="server" Text="test2"></asp:LinkButton>
   </div>
   <asp:LinkButton ID="LinkButton2" runat="server" Text="test1"></asp:LinkButton>
   </form>
</body>
</html>

在實踐中,我不會將 javascript 直接放在元素中,而這只是一個範例。您也可以將滾動位置儲存在 cookie 中。

引用自:https://stackoverflow.com/questions/1094589