将焦点设置为控制后如何在 TabPanel 中的 Chrome 和 Safari 中保持滚动位置答案

【问题标题】：How to maintain scroll position in Chrome and Safari in TabPanel after setting focus to control将焦点设置为控制后如何在 TabPanel 中的 Chrome 和 Safari 中保持滚动位置
【发布时间】：2013-08-29 15:31:26
【问题描述】：

在使用以下编码将焦点设置为跨多个浏览器的回发控件后，我试图保持滚动位置。在 IE 中运行良好，但在 Chrome、Firefox 和 Safari 中，当我尝试将焦点重新设置在导致回发的控件上时，滚动会跳回顶部。我使用 scriptmanager.setfocus(control) 方法设置焦点。注意：我指的是标签面板中的垂直滚动条，而不是主页滚动条。

 Private Sub Page_PreRender(sender As Object, e As System.EventArgs) Handles Me.PreRender
     Dim PostControl As Control = FindControlById(HiddenFieldPostControl.Value)
        If PostControl IsNot Nothing Then
            Dim sm As ScriptManager = ScriptManager.GetCurrent(Master.Page)
            sm.SetFocus(PostControl)
        End If
    End If
 End Sub

//-----------------------------------------------------------------------------------//
// Maintain scroll position in given element or control
//-----------------------------------------------------------------------------------//
var yPos
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);

function BeginRequestHandler(sender, args) {
    var tb = document.getElementById('MainContent_RightTabContainer_InputTabPanel');
    if (tb != null) {
        yPos= $get('InputPanel.ClientID').scrollTop;
    }
}
function EndRequestHandler(sender, args) {
    var tb = document.getElementById('MainContent_RightTabContainer_InputTabPanel');
    if (tb != null) {
        $get('InputPanel.ClientID').scrollTop = yPos;
    }
}

<asp:Panel ID="InputPanel" runat="server" CssClasss="MenuPanel" EnableViewState="False">
    ...controls
</asp:Panel>

【问题讨论】：

标签： javascript asp.net web-applications

【解决方案1】：

您可以这样修改 Page 指令：

<%@ Page Title="" Language="C#"  MaintainScrollPositionOnPostback="true" Inherits="SomeObject" %>

【讨论】：

是的，我已经在使用 MaintainScrollPositionOnPostback 但这仅适用于页面，而不适用于选项卡面板内的滚动条。不过谢谢。

【解决方案2】：

通过使用 postBackElement 在 javascript 中设置焦点而不使用脚本管理器将焦点设置在服务器端事件上解决了问题。我在下面Focus Scroll Issue找到了这段代码

这是我更新的 javascript 代码。另外，从 Page_PreRender 事件中删除 sm.SetFocus(PostControl)

//-----------------------------------------------------------------------------------//
// Maintain scroll position in given element or control
//-----------------------------------------------------------------------------------//
var yPos
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);

function BeginRequestHandler(sender, args) {
    var tb = document.getElementById('MainContent_RightTabContainer_InputTabPanel');
    if (tb != null) {
        postBackElement = args.get_postBackElement();
        yPos= $get('InputPanel.ClientID').scrollTop;
    }
}
function EndRequestHandler(sender, args) {
    var tb = document.getElementById('MainContent_RightTabContainer_InputTabPanel');
    if (tb != null) {
        $get('InputPanel.ClientID').scrollTop = yPos;
        if (postBackElement != null) {
            document.getElementById(postBackElement.id).focus();
        }
    }
}

【讨论】：