[ASP.NET] Scroll Position 保持捲軸位置
特地列出來,是因為除了整頁 Page 的捲軸位置外,有時
後會想要把頁面中捲軸固定位置,這時候只有透過 script 去進行操作了。
先介紹一下整頁維持 Scroll 位置的部分,可以在想要維持的頁面設定 MaintainScrollPositionOnPostback 屬性
這樣這一頁就會有 Scrollbar 保持原來位置的效果了。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
MaintainScrollPositionOnPostback="true" %>
另一個是將網站所有頁面都支援 MaintainScrollPositionOnPostback,這必須要在 web.config 設定
設定之後,每個頁面都會保持捲軸位置了。
<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0"/>
<pages maintainScrollPositionOnPostBack="true"></pages>
</system.web>
</configuration>
接下來是頁面中的捲軸了,就像下圖所示:
在頁中的 Scrollbar 要維持位置,可以透過 cookie 的方式
來做,利用 JavaScript 紀錄位置,在重新刷新時候讀取
紀錄重新定位。
這邊透過 JQuery 來操作,這是很簡易的範例,想要
比較完善的功能可以自己來撰寫自己想要的功能
<script type="text/javascript">
$(document).ready(function () {
var strCook = document.cookie;
if (strCook.indexOf("!~") != 0) {
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS + 2, intE);
$(".gvArea").scrollTop(strPos);
}
$(".gvArea").scroll(function () {
var intY = $(".gvArea").scrollTop();
document.cookie = "yPos=!~" + intY + "~!";
});
});
</script>
對於上述的功能還可以使用別人製作好的套件
使用方法很簡單,如下表示直接引用就可以,詳細資料可以參閱參考資料
<script type="text/javascript" src="scrollsaver.min.js"></script>
範例檔案 下載
參考資料: