[ASP.NET] Scroll Position 保持捲軸位置

2013-09-06

10015
0
2014-02-25

特地列出來，是因為除了整頁 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>

範例檔案下載

參考資料：

MSDN_Page.MaintainScrollPositionOnPostBack 屬性

Maintain Scroll Position of EVERY Element on PostBacks

回首頁