如何在列表視圖中保持DIV滾動條位置ASP.net

Question

我的問題是當我在列表視圖中單擊圖像按鈕（「imgEdit」）時，我的列表視圖的滾動條並不停留在單擊它的位置。

繼承人我的代碼：

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server"> 
<ContentTemplate> 
<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 

    <asp:ListView ID="LV_Profile" runat="server" GroupItemCount="1" GroupPlaceholderID="groupPlaceHolder1" 
     ItemPlaceholderID="itemPlaceHolder1" OnItemDataBound="LV_Profile_ItemDataBound" OnSelectedIndexChanged="LV_Profile_SelectedIndexChanged" > 
     <LayoutTemplate> 
      <div id ="mainprofile" style="overflow-x: scroll; margin: 0 65px;" runat="server"> 
      <div id="subdivprof" runat="server" style="height: inherit; width: 3400px; margin: 10px 0;"> 

       <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder> 
      </div> 
      </div> 
     </LayoutTemplate> 
     <GroupTemplate> 
       <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder> 
     </GroupTemplate>  
     <ItemTemplate> 
      <div class="divprofile"> 
       <div id="proftools" class="tools" runat="server"> 
        <asp:ImageButton ID="imgCancel" CssClass="img" 
          ImageUrl="~/images/Delete-52 (1).png" runat="server" alt="" 
          ToolTip="Cancel edit" Visible="False" OnClick="DoneEdit" /> 
        <asp:ImageButton ID="imgDone" CssClass="img" 
          ImageUrl="~/images/Checkmark-52.png" runat="server" alt="" 
          ToolTip="Done edit" Visible="False" /> 
        <asp:ImageButton ID="imgEdit" CssClass="img" ImageUrl="~/images/Edit User Male-52.png" 
          runat="server" alt="" ToolTip="Edit profile" OnClick = "EditUser" /> 
        <asp:ImageButton ID="imgEmail" CssClass="img" ImageUrl="~/images/-Message Filled-52.png" 
          runat="server" alt="" ToolTip="Send an email" /> 
       </div> 
       <div id="proginfo" runat="server"> 
        <div class="level"><%#Eval("Prog_Pos")%></div> 
        <div class="pic"><asp:ImageButton ID="ImageButton1" CssClass="img" runat="server" onclick="FindUser" OnClientClick="return chooseFile();" ToolTip='<%#Eval("Idno")%>' Enabled="False" /></div> 
        <div class="nickname"><asp:Textbox ID="txtNickname" runat="server" Text='<%#Eval("NickName") %>' CssClass="txt" Enabled="false" style="margin-top:10px;"></asp:Textbox></div> 
        <div class="name"><asp:TextBox ID="txtName" runat="server" Text='<%#Eval("Name")%>' CssClass ="txt" Enabled="false" ></asp:TextBox></div> 
        <div class="email"><asp:Textbox ID="txtEmail" runat="server" Text='<%#Eval("emailAddress")%>' CssClass="txt" Enabled="false"></asp:Textbox></div> 
       </div> 
      </div> 
     </ItemTemplate> 
     </asp:ListView> 
</ContentTemplate> 
    </asp:UpdatePanel> 

在此先感謝。 :)

Answer 1

您需要更新後返回列表位置。

添加在的.aspx

<asp:HiddenField id="scrollPosition" runat="server"/> 

接下來，你需要在JS

找到這個hiddenfield

var hdField = document.getElementById(<%=scrollPosition.ClientID%>); 

查找列表

var list= document.getElementById('LV_Profile'); 

OnScroll事件設置VA略您HiddenField

list.onscroll = function() { 
    hdField .value = list.scrollTop; 
} 

當窗口或文檔的onload回報保存它不工作位置

window.onload = function() { 
    list.scrollTop = hdField.value; 
}