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

  • 10014
  • 0
  • 2014-02-25

[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 紀錄位置,在重新刷新時候讀取

紀錄重新定位。

image

 

這邊透過 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