javascript - ASP.NET 回发后保持 DIV 内 gridview 的水平滚动条位置

Question

我有一个很长的 GridView 。我想在回发时保持滚动位置。我已经尝试了许多关于堆栈溢出的解决方案，但知道对我有用。

这是我的 GridView

<div class="largeGridScroll">
           <asp:GridView ID="gvInventario" runat="server" AutoGenerateColumns="false"  AllowSorting="true" ShowFooter="false" DataKeyNames="componente_id, ubicacion_id, proveedor_id"  PageSize="10"
                ShowHeaderWhenEmpty="true" AllowPaging="True" OnRowEditing="gvInventario_RowEditing" OnRowCancelingEdit="gvInventario_RowCancelingEdit" OnPageIndexChanging="gridView_PageIndexChanging" 
                 CellPadding="3"  AllowColumResize="True" onsorting="grdDetails_Sorting" GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">    
                <Columns>
                </Columns>
            </asp:GridView>
            </div>

这是我想要防止滚动条静止的按钮的代码

        <asp:Button class="btn btn-primary" ID="btnConfirmPurchases" runat="server" Text="Validar" AutoPostback="true" width="20%"  OnClick="Add_location_Click" /> 
            <asp:Button class="btn btn-primary"  ID="Button1" runat="server" Text="Validar" OnClick="Confirm_purchase_order_Click"  />
  <asp:Button class="btn btn-primary" ID="btnShowPurchaseOrder" runat="server" Text="Comprar" AutoPostback="false" OnClientClick="return ShowModalPopup(); return false;" OnClick="view_purchases_click" />     

                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:ImageButton ImageUrl="~/Images/edit.png" runat="server" CommandName="Edit" ToolTip="Edit" Width="20px" Height="20px"/>
                           <%-- <asp:ImageButton ImageUrl="~/Images/shopping.png" runat="server" class="button" ToolTip="Shopping" Width="20px" Height="20px" />--%>
                            <a class="button" href="#popup1" ><img src="../images/shopping.png" width="20" height="20"/></a>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:ImageButton ImageUrl="~/Images/save.png" runat="server" ToolTip="Update" Width="20px" Height="20px" OnClick="updateOcurencia"/>
                            <asp:ImageButton ImageUrl="~/Images/cancel.png" runat="server" CommandName="Cancel" ToolTip="Cancel" Width="20px" Height="20px"/>
                        </EditItemTemplate>
                    </asp:TemplateField>

这是CSS。

.largeGridScroll 
{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

这是我的 GridView 的视觉效果。

当我按下其中一个按钮时，我不想像图片上那样丢失滚动位置。我尝试过使用 javascript 和 updatepanel 但没有成功，因为所有教程都有垂直滚动而不是像我的那样水平滚动。任何帮助将不胜感激，谢谢。

Answer 1

我在这里找到了答案https://www.webcodeexpert.com/2015/09/how-to-maintain-scroll-position-of-html.html我只需要改变一些小东西就可以使其水平这是我的CSS

.largeGridScroll 
{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

这是我的 JavaScript

 $(document).ready(function () {
    maintainScrollPosition();
});

function pageLoad() {
    maintainScrollPosition();
}

function setScrollPosition(scrollValue) {
    $('#<%=hfScrollPosition.ClientID%>').val(scrollValue);
}

function maintainScrollPosition() {
    $("#dvScroll").scrollLeft($('#<%=hfScrollPosition.ClientID%>').val());
}

这是我的 aspx

 <asp:HiddenField ID="hfScrollPosition" Value="0" runat="server" />
    <div  id="dvScroll" class="largeGridScroll" onscroll="setScrollPosition(this.scrollLeft);">