“maintainScrollPositionOnPostBack=”true“”不适用于谷歌浏览器

Posted 2023-03-06

【中文标题】“maintainScrollPositionOnPostBack=”true“”不适用于谷歌浏览器

【英文标题】：“maintainScrollPositionOnPostBack=”true“ ” does not work with google chrome

【发布时间】：2014-11-06 19:25:10

【问题描述】：

Web.config Level => 页面维护ScrollPositionOnPostBack="true" />

Page Level =>

代码级别 => Page.MaintainScrollPositionOnPostBack = true;

浏览器级别 => 浏览器 id="Chrome" parentID="Safari1Plus"> 能力> 能力名称="supportsMaintainScrollPositionOnPostback" value="true" /> 能力> 浏览器>

上述 4 种方法中的任何一种不适用于 google chrome。它在 Firefox 上运行良好。请提供任何解决方案。

【问题讨论】：

你必须实现你自己的方法。 ***.com/a/9607425/961695

对于现在（或以后）来这里的任何人，至少谷歌浏览器似乎支持页面级别的添加。

【参考方案1】：

您可以将此 sn-p 添加到您的 ASP.NET 页面/MasterPage（需要 jQuery）：

<asp:HiddenField runat="server" ID="hfPosition" Value="" />
<script type="text/javascript">
    $(function () 
        var f = $("#<%=hfPosition.ClientID%>");
        window.onload = function () 
            var position = parseInt(f.val());
            if (!isNaN(position)) 
                $(window).scrollTop(position);
            
        ;
        window.onscroll = function () 
            var position = $(window).scrollTop();
            f.val(position);
        ;
    );
</script>

【讨论】：

对于任何来这里通过 ajax 调用解决此问题的人，window.onload 将不会运行，因此滚动永远不会发生。相反，我建议使用特殊的 asp.net 函数 pageLoad。 function pageLoad() var position = parseInt(f.val());if (!isNaN(position)) $(window).scrollTop(position);

【参考方案2】：

我也遇到了同样的问题。我找到了一个 Javascript 解决方案 here。

<script type = "text/javascript">
window.onload = function () 
    var scrollY = parseInt('<%=Request.Form["scrollY"] %>');             
    if (!isNaN(scrollY)) 
        window.scrollTo(0, scrollY);
    
;
window.onscroll = function () 
    var scrollY = document.body.scrollTop;
    if (scrollY == 0) 
        if (window.pageYOffset) 
            scrollY = window.pageYOffset;
        
        else 
            scrollY = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
        
    
    if (scrollY > 0) 
        var input = document.getElementById("scrollY");
        if (input == null) 
            input = document.createElement("input");
            input.setAttribute("type", "hidden");
            input.setAttribute("id", "scrollY");
            input.setAttribute("name", "scrollY");
            document.forms[0].appendChild(input);
        
        input.value = scrollY;
    
;

希望对你有帮助。

【参考方案3】：

无论我尝试什么，都无法让 MaintainScrollPositionOnPostback 为我工作。根据 Darkseal 的回答和 Eirik H 的评论，我尝试了以下对我有用的代码。这仅在您的页面上有 ASP.NET ScriptManager（即 MicrosoftAjax.js）时才有效。您还需要将 JQuery 添加到您的页面中。将以下代码添加到您的 .aspx 文件中 asp:ScriptManager 标记下方的某处。

<asp:HiddenField runat="server" ID="hfPosition" Value="" />
<script type="text/javascript">
    $(function () 
        var positionField = $("#<%=hfPosition.ClientID%>");
        window.onscroll = function () 
            var position = $(window).scrollTop();
            positionField.val(position);
        ;
    );

    function pageLoad() 
        var positionField = $("#<%=hfPosition.ClientID%>");
        var position = parseInt(positionField.val());
        if (!isNaN(position)) 
            $(window).scrollTop(position);
        
    ;
</script>

基本上，我们将滚动位置保存在一个名为 hfPosition 的隐藏字段的值内。每当页面滚动时，该值都会更新。然后当回发发生时 pageLoad() 将被自动调用并获取 hfPosition 的值并滚动到该值。

包括 ScriptManager 和 JQuery，我的最终代码 sn-p 看起来像这样：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script src="../Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
<asp:HiddenField runat="server" ID="hfPosition" Value="" />
<script type="text/javascript">
    $(function () 
        var positionField = $("#<%=hfPosition.ClientID%>");
        window.onscroll = function () 
            var position = $(window).scrollTop();
            positionField.val(position);
        ;
    );

    function pageLoad() 
        var positionField = $("#<%=hfPosition.ClientID%>");
        var position = parseInt(positionField.val());
        if (!isNaN(position)) 
            $(window).scrollTop(position);
        
    ;
</script>/>