保持更新面板中列表框的滾動位置，而不是頁面

Question

我在更新面板中有一個列表框。當我向下滾動並選擇一個項目時，它會滾動回到列表框的頂部。我聽說dom沒有跟蹤回滾時的滾動位置。有沒有人有解決方案/例如如何解決這個問題？

感謝， XaiSoft

Answer 1

您正在運行到這個問題，因爲當異步請求回來的UpdatePanel完全替換一個新的滾動<select>元素。

可能的解決方案：

1. 使用JavaScript的<select>元素的scrollTop財產保存在一個隱藏的表單元素的UpdatePanel提交前（通過調用ClientScriptManager.RegisterOnSubmitStatement方法），然後將它設置在當AJAX調用返回時，新的<select>。這將是乏味的，容易出錯的，並且可能不是很兼容（參見here）。

2. 使用JavaScript來存儲<select>的selectedIndex屬性，並在AJAX調用返回時重新選擇該項。如果用戶還沒有選擇任何東西，這顯然不起作用。

3. Don't use UpdatePanels。改爲嘗試jQuery + ASP.NET page methods。

Answer 2

看來，在下列方式下面的代碼示例滾動：

• 的Internet Explorer 8：回傳後所選擇的項目是第一個可見項目。

• 火狐：回傳後所選擇的項目始終是可見的（但可能是最後一個可見項）。

• 鉻：回發後，所選擇的項目可能會因爲列表框滾動到頂部被隱藏，就像你說的。

 
<asp:UpdatePanel ID="up1" runat="server"> 
    <ContentTemplate> 
     <asp:ListBox ID="lb1" runat="server" Height="100px" AutoPostBack="true"> 
      <asp:ListItem>A</asp:ListItem> 
      <asp:ListItem>B</asp:ListItem> 
      <asp:ListItem>C</asp:ListItem> 
      <asp:ListItem>D</asp:ListItem> 
      <asp:ListItem>E</asp:ListItem> 
      <asp:ListItem>F</asp:ListItem> 
      <asp:ListItem>G</asp:ListItem> 
      <asp:ListItem>H</asp:ListItem> 
     </asp:ListBox> 
    </ContentTemplate> 
</asp:UpdatePanel> 

Answer 3

var xPos, yPos; 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    function BeginRequestHandler(sender, args) { 
     if (($get('Panel1')) != null) { 
      xPos = $get('Panel1').scrollLeft; 
      yPos = $get('Panel1').scrollTop; 
     } 
    } 

    function EndRequestHandler(sender, args) { 
     if (($get('Panel1')) != null) { 
      $get('Panel1').scrollLeft = xPos; 
      $get('Panel1').scrollTop = yPos; 
     } 
    } 
    prm.add_beginRequest(BeginRequestHandler); 
    prm.add_endRequest(EndRequestHandler); 

    //Note: "Panel1" Panel or div u want to maintain scroll position 
    //Note: This Java Script should be added after Scriptmanager***** 

//保持滾動位置的面板/格與出更新面板

window.onload = function() { 
     var strCook = document.cookie; 
     if (strCook.indexOf("!~") != 0) { 
      var intS = strCook.indexOf("!~"); 
      var intE = strCook.indexOf("~!"); 
      var strPos = strCook.substring(intS + 2, intE); 
      document.getElementById('Panel1').scrollTop = strPos; 
     } 
    } 
    function SetDivPosition() { 
     var intY = document.getElementById('Panel1').scrollTop; 
     document.title = intY; 
     document.cookie = "yPos=!~" + intY + "~!"; 
    } 


    //Note: "Panel1" Panel id or div id for which u want to maintain scroll position 

Answer 4

您仍然可以實現使用含有ListBox的UpdatePanel的局部回傳，但防止它被覆蓋的一個新的實例通過設置在UpdatePanel如下：

ChildrenAsTriggers="False" 

這在MSDN的規定：

獲取或設置一個值，該值指示從UpdatePanel控件的即時 子控件的回發是否更新面板的內容。 如果您不希望將UpdatePanel控件的直接子控件的 回發更新爲 ，則將ChildrenAsTriggers屬性設置爲false會導致更新面板內容。

一個需要注意的情況是，如果你正在嘗試做任何其他的可視化操控，從服務器端（即添加CSS屬性上回發的項目）列表框，那麼你就不會看到他們渲染，直到另一個不相關的回發發生。如果你正在做的是選擇比設置ChildrenAsTriggers="False"將工作。

Answer 5

對於我正在開發的企業應用程序，事實證明，MasterPage.Master頁面正在處理Sys.WebForms.PageRequestManager.getInstance（）。add_endRequest事件並在其中設置window.scroll（0,0）。內容頁顯然正在執行內容頁的UpdatePanel的每個觸發器上的window.scroll（0,0）。我嘗試覆蓋內容頁面中的add_endRequest功能，但無法使其工作。最終，我只是修改Master.Master，不做window.scroll（0,0）。